Icon button
An icon button shows an icon instead of a label.
When to use
- A dense row of controls, such as a toolbar or the end of a table row, where labels would not fit.
- An action with a symbol everyone already knows, such as close, search or add.
- With a tooltip, so sighted users can see what the icon means.
When not to use
- An action with no well known symbol. People have to guess, and most will guess wrong.
- The primary action of a view. It needs a visible label.
- Where there is room for words. A labelled button is always clearer.
Guidance
Do
Label the action, not the icon. Add conversation says what the button does, and it is the only name the button has.
Don't
Do not name the icon. Plus describes the picture and does not say what will happen.
Intensity
How much attention each of this component's grounds uses, scored 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. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. See intensity.
Content
What to write, and what to leave out.
- Write the label as a verb and its object, as on a normal button.
- Never name the icon. Add conversation, not Plus.
- Use the same words in the tooltip, so sighted and screen reader users get the same label.