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.
- Alongside a tooltip, which is what makes the icon readable to a sighted reader.
When not to use
- An action with no established symbol. The reader has to guess, and most will guess wrong.
- The primary action of a view, which deserves a label.
- Where there is room for words. A labelled button is always clearer.
Guidance
Do
Label the action, not the picture. Add conversation is what the button does, and it is the only name it has.
Don't
Do not label it with the icon. Plus describes the drawing and tells the reader nothing about what will happen.
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.
Content
What to write, and what to leave out.
- The label is a verb and its object, exactly as on a normal button.
- Never name the icon. Add conversation, not Plus.
- Pair the same label with the tooltip, so sighted and screen reader users get the same words.