Button

Combine text with icons to form buttons.

Available in five sizes that leverage our font size scale.

<Button size='xs' prefix={<Up/>}>Button</Button>
<Button size='sm' prefix={<Up/>}>Button</Button>
<Button size='md' prefix={<Up/>}>Button</Button>
<Button size='lg' prefix={<Up/>}>Button</Button>
<Button size='xl' prefix={<Up/>}>Button</Button><Button size='xs' prefix={<Up/>}>Button</Button>
<Button size='sm' prefix={<Up/>}>Button</Button>
<Button size='md' prefix={<Up/>}>Button</Button>
<Button size='lg' prefix={<Up/>}>Button</Button>
<Button size='xl' prefix={<Up/>}>Button</Button>

You can put an icon at the front, or back, or both.

<Button prefix={<Reset/>}>Reset</Button>
<Button prefix={<Left/>}>Back</Button>
<Button suffix={<Right/>}>Forward</Button>
<Button prefix={<Up/>} suffix={<Up/>}>Up</Button>
<Button prefix={<X/>}>Cancel</Button><Button prefix={<Reset/>}>Reset</Button>
<Button prefix={<Left/>}>Back</Button>
<Button suffix={<Right/>}>Forward</Button>
<Button prefix={<Up/>} suffix={<Up/>}>Up</Button>
<Button prefix={<X/>}>Cancel</Button>

The default button is in primary and transitions to secondary. You can use inverted to flip it.

<Button prefix={<Up/>}>Button</Button>
<Button prefix={<Up/>} inverted>Inverted button</Button><Button prefix={<Up/>}>Button</Button>
<Button prefix={<Up/>} inverted>Inverted button</Button>

You can also specify the color of the button as a whole.

{
  colors.map((color) => (
    <Button key={color} sx={{ color: color }} suffix={<RotatingArrow />}>
      <Box as='span' sx={{ textTransform: 'capitalize' }}>
        {color}
      </Box>
    </Button>
  ))
}{
  colors.map((color) => (
    <Button key={color} sx={{ color: color }} suffix={<RotatingArrow />}>
      <Box as='span' sx={{ textTransform: 'capitalize' }}>
        {color}
      </Box>
    </Button>
  ))
}

Or just specify the color for the icon.

{
  colors.map((color) => (
    <Button key={color} suffix={<RotatingArrow sx={{ color: color }} />}>
      <Box as='span' sx={{ textTransform: 'capitalize' }}>
        {color}
      </Box>
    </Button>
  ))
}{
  colors.map((color) => (
    <Button key={color} suffix={<RotatingArrow sx={{ color: color }} />}>
      <Box as='span' sx={{ textTransform: 'capitalize' }}>
        {color}
      </Box>
    </Button>
  ))
}

You can pass an href to render a link using the same styling as our buttons. This will be rendered as an <a> element rather than a <button>. When using an href you can also pass the extra internal and tracking options used by the Link component.

This is a link

<Button href='/design/button' suffix={<RotatingArrow />}>
  This is a link
</Button><Button href='/design/button' suffix={<RotatingArrow />}>
  This is a link
</Button>

X,Y: 0000,0000

4a30554