Button group
A button group shows related actions together.
When to use
- Two or three actions belonging to the same thing, such as the footer of a dialog.
- Anywhere the actions should read as one set rather than as separate controls.
When not to use
- One action, which needs no group.
- Actions belonging to different things, which grouping would wrongly imply are related.
- More than about three, which becomes a menu.
Guidance
Do
Put the primary action last and name the group. The order reads from least to most committing.
Don't
Do not lead with the primary and do not colour a cancel as danger. Discard is not destructive and should not look like it.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| button | neutral | 0.042Ambient | 0.066Substrate |
| button | disabled | 0.042Ambient | 0.129Ambient |
| button--danger | danger-bold | 0.443Marked | 0.617Marked |
| button--default | neutral | 0.042Ambient | 0.066Substrate |
| button--discovery | discovery-bold | 0.444Marked | 0.624Marked |
| button--primary | brand-bold | 0.460Marked | 0.598Marked |
| button--selected | selected | 0.042Ambient | 0.062Substrate |
| button--subtle | neutral-subtle | 0.000Substrate | 0.000Substrate |
| button--warning | warning-bold | 0.448Marked | 0.601Marked |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.