Button
BetaBatch A. A button starts an action, such as saving or deleting.
When to use
Use for actions that change something, like saving or starting a task. Keep one primary button per area.
When not to use
Don't use to go to another page; use Link.
Anatomy
- Container
- Icon before the label (optional)
- Label
- Icon after the label (optional)
- Spinner, in place of the first icon, while loading
Variants
| Property | Options | Default |
|---|---|---|
| variant | primary, secondary, tertiary | secondary |
| tone | neutral, negative (destructive actions) | neutral |
States
Pictures of each state. Use the live example on the Code tab to try the component.
| Default | Hover | Focus-visible | Pressed | Disabled | Loading | |
|---|---|---|---|---|---|---|
| primary / neutral | ||||||
| primary / negative | ||||||
| secondary / neutral | ||||||
| secondary / negative | ||||||
| tertiary / neutral | ||||||
| tertiary / negative |