Button
Three tones crossed with four fills, at two radii. A grid, not a list of hand-picked variants.
When to use it
Expressing it as a grid means a new combination is a prop rather than a new entry someone has to invent classes for. Press feedback is a distinctly darker fill, not a shade of hover: repeating hover on press reads as an unresponsive control on touch, where there is no hover at all. Buttons are 44px on mobile and 32px from md up.
Tones and fills
The full grid. Every cell is a prop pair, not a bespoke class.
neutral
primary
danger
Sizes and states
With icons
Options
Everything you can pass to Button.
| Prop | Type | Default | What it does |
|---|---|---|---|
| tone | 'neutral' | 'primary' | 'danger' | 'neutral' | Semantic weight of the action. |
| fill | 'solid' | 'soft' | 'outline' | 'ghost' | 'solid' | How much surface the button occupies. |
| size | 'sm' | 'md' | 'lg' | 'icon' | 'iconSm' | 'md' | md is 44px on mobile, 32px from md up. |
| radius | 'sm' | 'md' | 'pill' | 'sm' | Pill is for floating and filter controls. |
| full | boolean | false | Stretches to the container, for mobile action bars. |