Button
The primary call to action. variant sets the emphasis (primary is a solid brand fill, secondary is a tinted fill, tertiary is quiet), isOnMedia swaps in a translucent glass fill for use over photos or dark surfaces, and isDestructive recolors the button for a dangerous action.
Overview
The primary call to action. variant sets the emphasis (primary is a solid brand fill, secondary is a tinted fill, tertiary is quiet), isOnMedia swaps in a translucent glass fill for use over photos or dark surfaces, and isDestructive recolors the button for a dangerous action.
The single most important action on a screen. One per view.
Variants and states
| default | pressed | disabled | |
|---|---|---|---|
| primary | |||
| secondary | |||
| tertiary |
Anatomy
- 1IconLeading optional nested instance
- 2Container.Label
- 3Label required
- 4IconTrailing optional instance swap
Measurements
Specs
Values resolved live from the token spine. Token names follow the active platform; each links to its page.
Properties
The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.
Accessibility
The 48pt height clears the 44pt minimum tap target. Keep label text concise and action-led (for example "Save" or "Continue"). The disabled state drops to 32% opacity, which is intentionally below contrast minimums, so never rely on a disabled button alone to convey information; pair it with helper text.
Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.