Components
Button
Starts an action. Comes in solid and ghost variants, seven tones and four sizes, with optional icons, subtitle, dropdown arrow and loading state.
Playground
Figma variant
🎛 Type=Button
💅 Style=Primary
👕 Size=Medium
🕹 State=Default
Disable=False
Icon Button=False
Loading=False
Show L Icon=False
Show R Icon=False
Subtitle=False
Dropdown=FalseAnatomy
- Container. Fill, corner radius and shadow change with variant, tone and state.
- Left icon. Optional. 20px on Large, 16px on Medium and Small, 12px on Tiny.
- Label. Bold text style of the size.
- Subtitle. Optional, after the label, regular weight in the lighter on-color.
- Right icon. Optional, same size as the left icon.
- Dropdown arrow. Optional, for buttons that open a menu.
Variants
Solid buttons (Figma Type=Button) carry the main actions. Ghost buttons have no fill until hovered and suit secondary actions inside dense layouts. Ghost has no Information tone.
Sizes
| Size | Height | Padding (y / x) | Radius | Text | Icon |
|---|---|---|---|---|---|
| large | 48px | --layout-small / --layout-xlarge | --radius-form-element | ui/text lead/bold | 20px |
| medium | 40px | --layout-tiny / --layout-default | --radius-form-element | ui/text/bold | 16px |
| small | 32px | --layout-tiny / --layout-small | --radius-form-element-small | ui/text small/bold | 16px |
| tiny | 24px | --layout-micro / --layout-tiny | --radius-form-element-small | ui/text small/bold | 12px |
States
Each tone changes its own color family per state. Focus keeps the fill and adds a 3px outside line, except Primary, which lightens and shows the focus ring.
| default | hover | pressed | focus | disabled | loading | |
|---|---|---|---|---|---|---|
| primary | ||||||
| secondary | ||||||
| tertiary | ||||||
| success | ||||||
| error | ||||||
| warning | ||||||
| info | ||||||
| ghost primary | ||||||
| ghost secondary | ||||||
| ghost tertiary | ||||||
| ghost success | ||||||
| ghost error | ||||||
| ghost warning |
Icon only
Round buttons with a single icon: 48px Large, 40px Medium, 32px Small, 24px Tiny.
Tokens
Tokens used by Button, per tone (X = primary, secondary, tertiary, success, error, warning, info).
| State | Fill | Text | Shadow |
|---|---|---|---|
| Default | --color-X | --color-on-X | Primary, Tertiary: --shadow-button-default · Secondary: --shadow-button-secondary-default |
| Hover | --color-X-natural | --color-on-X | — |
| Pressed | --color-X-shade | --color-on-X | — |
| Focus | --color-X (Primary: --color-X-tint) | --color-on-X | Primary: --shadow-focus-primary · others: 3px line |
| Disabled | --color-X-soft | --color-X-tint | — |
| Loading | --color-X-soft | — | Loader: --color-X / --color-on-X |
Notes from Figma
- Loader sizes differ between variants in Figma (20, 24 or 16px for Medium). Code uses 24px for Large and Medium, 16px for Small and Tiny.
- Tiny shows a 12px left icon but a 16px right icon in Figma. Code uses 12px for both.
- Success Small and Tiny loading variants use the Tertiary soft fill in Figma. Code uses Success soft.
- Ghost Tertiary uses tertiary/tertiary (white) for its label in Figma, which disappears on light surfaces. Code uses foreground/high-emphasis.
Figma to code
| Figma | React |
|---|---|
| 🎛 Type = Button / Ghost | variant='solid' / 'ghost' |
| 💅 Style = Primary … Information | tone='primary' … 'info' |
| 👕 Size = Large / Medium / Small / Tiny | size='large' / 'medium' / 'small' / 'tiny' |
| 🕹 State = Hover / Pressed / Focus | :hover / :active / :focus-visible |
| Disable = True | disabled |
| Loading = True | loading |
| Icon Button = True | icon={…} aria-label="…" |
| Show L Icon / Show R Icon | iconLeft={…} / iconRight={…} |
| Subtitle = True | subtitle="…" |
| Dropdown = True | dropdown |