Buttons should be clear and predictable - users should be able to anticipate what will happen when they click a button.
Prop | Type | Default | Notes |
---|---|---|---|
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 |
<div>
<Button>
Save
</Button>
<Button disabled>
Save
</Button>
<Button size='small'>
Save
</Button>
<Button>
Save
</Button>
<Button size='large'>
Save
</Button>
</div>
<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>
<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>
<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>