Split button
A split button pairs a primary action with a menu of related actions.
When to use
- One action that most readers want, with a few related variants behind it.
- Somewhere the common case should be one click and the alternatives should not crowd it.
When not to use
- Unrelated actions. The two halves claim to be variants of one thing.
- No clear default. If the choices are equal, use a dropdown menu instead.
- A single action, which needs no second half.
Guidance
Do
Put the common action in the main half, and keep the menu for genuine variants of it such as saving as a copy.
Don't
Do not hide unrelated actions behind the arrow. A reader expects variants of Save, not Delete.
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.