Button is used for actions, like in forms, while Link is used for destinations, or moving from one page to another.

In special cases where you'd like to use a <a> styled like a Button, use <Button as='a'> and provide an href.

Default examples

<ButtonDanger>Button Danger</ButtonDanger>
<ButtonOutline>Button Outline</ButtonOutline>
<ButtonPrimary>Button Primary</ButtonPrimary>

System props

Button components get COMMON system props. Read our System Props doc page for a full list of available props.

Component props

Prop nameTypeDefaultDescription
asStringbuttonsets the HTML tag for the component
disabledBooleansets the disabled attribute on the Button
groupedBooleanallows you to use Button in a line of Buttons without duplicate borders
onClickFunctionfunction to be called when Button is clicked
sizeStringuse sm for a small Button, or large for a large Button
Edit this page on GitHub