ButtonLink

Open in Playground

A link styled like Button, with the same variants. disabled sets aria-disabled and blocks navigation. linkComponent / linkProp swap in a router link.

Like Button, icons and text sit side by side.

Docs GitHub Disabled

Props

hrefstring
Link destination.
variant'default' | 'secondary' | 'flat' | 'success' | 'danger' | 'warning'
Default: 'default'
Visual style (same as Button).
disabledboolean
Default: false
Sets aria-disabled, removes the tab stop and blocks navigation.
linkComponentElementType
Default: 'a'
Component used for links, e.g. a router Link.
linkPropstring
Default: 'href'
Name of the destination prop on linkComponent (e.g. "to" for react-router).
onClick(event) => void
Click handler.
classNamestring
Default: ''
Extra classes for the root element.
childrenReactNode
Content.
...rest
Any other props are passed to the underlying element.

ButtonLink props
Prop	Type	Default	Description
`href`	string	–	Link destination.
`variant`	'default' \| 'secondary' \| 'flat' \| 'success' \| 'danger' \| 'warning'	`'default'`	Visual style (same as Button).
`disabled`	boolean	`false`	Sets aria-disabled, removes the tab stop and blocks navigation.
`linkComponent`	ElementType	`'a'`	Component used for links, e.g. a router Link.
`linkProp`	string	`'href'`	Name of the destination prop on `linkComponent` (e.g. "to" for react-router).
`onClick`	(event) => void	–	Click handler.
`className`	string	`''`	Extra classes for the root element.
`children`	ReactNode	–	Content.
`...rest`		–	Any other props are passed to the underlying element.