Buttons

Buttons make common actions immediately visible and easy to perform with one click or tap. They can be used for any type of action, including navigation.

Code

Buttons should be clear and predictable - users should be able to anticipate what will happen when they click a button.

PropTypeDefaultNotes
variant
string
standard
Determines style variant. Possible variants are standard, special, outline, transparent
size
string
regular
Determines button size. Possible sizes are small, regular, large
children
node
Render as the Button’s children
…props
any
Passes through any other props to underlying button, or in the case of an href prop being passed, anchor, element

Standard

Default
Disabled
24px
36px
44px
Code
<div>
  <Button>
    Save
  </Button>
  <Button disabled>
    Save
  </Button>
  <Button size='small'>
    Save
  </Button>
  <Button>
    Save
  </Button>
  <Button size='large'>
    Save
  </Button>
</div>

Text Only

Default
Disabled
36px
44px
Code
<div>
  <Button variant='transparent'>
    Cancel
  </Button>
  <Button
    disabled
    variant='transparent'
  >
    Cancel
  </Button>
  <Button variant='transparent'>
    Cancel
  </Button>
  <Button
    size='large'
    variant='transparent'
  >
    Cancel
  </Button>
</div>

Outline

Default
Disabled
24px
36px
44px
Code
<div>
  <Button variant='outline'>
    Edit
  </Button>
  <Button
    disabled
    variant='outline'
  >
    Edit
  </Button>
  <Button
    size='small'
    variant='outline'
  >
    Edit
  </Button>
  <Button variant='outline'>
    Edit
  </Button>
  <Button
    size='large'
    variant='outline'
  >
    Edit
  </Button>
</div>

Transactional

Default
Disabled
36px
44px
Code
<div>
  <Button variant='special'>
    Purchase
  </Button>
  <Button
    disabled
    variant='special'
  >
    Purchase
  </Button>
  <Button variant='special'>
    Purchase
  </Button>
  <Button
    size='large'
    variant='special'
  >
    Purchase
  </Button>
</div>