Skip to content


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.

To create a button group, wrap Button elements in the ButtonGroup element. ButtonGroup gets the same props as Box.

Default examples

Button Table List

System props

System props are deprecated in all components except Box. Please use the sx prop instead.

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

Component props

Native <button> HTML attributes are forwarded to the underlying React button component and are not listed below.


Prop nameTypeDefaultDescription
asStringbuttonsets the HTML tag for the component
fontSizeNumber or Stringexplicitly sets the font size for the Button text; overrides any value for the variant prop
variantString'medium'a value of small, medium, or large results in smaller or larger Button text size; no effect if fontSize prop is set


ButtonGroup has access to the same props as Box

Edit this page on GitHub
4 contributorsVanAndersonemplumsocean90BinaryMuse
Last edited by VanAnderson on July 22, 2021