Buttons & chips
Buttons trigger actions. Chips classify and filter, they are not buttons.
Variants
| Variant | Intent |
|---|---|
| accent | The single primary action of a view (Install, Save, Continue) |
| default | Standard actions, the workhorse |
| flat | Low-emphasis actions in toolbars and dense UI |
| destructive | Irreversible or removal actions, always paired with confirmation |
| link | Inline text actions |
Rules
- Exactly one accent button per view.
- Destructive buttons are only destructive on confirmation, the confirming dialog repeats the destructive styling (see Dialogs).
- Loading replaces the label with an ongoing action; the button disables itself to prevent double submits.
- Minimum hit target: 32px height (small) with ≥ 8px spacing; 36px for primary flows.
Do
One accent action, supported by a neutral one.
Don't
Three competing accent buttons, nothing reads as primary.
Chips
Chips are compact status and category labels. They never look like buttons and are never the only place a critical state is communicated.
NeutralInstalledDownloadingUp to dateUpdate availableFailed