Lozenge
A lozenge shows an item's status so people can recognise it quickly.
When to use
- The state of an item in a list or on a card, such as a ticket that is in progress or a change that was reverted.
- A state that changes over time, which people scanning a column need to spot without reading every row.
When not to use
- A category or a label that does not change. That is a tag.
- A count. That is a badge.
- An action. A lozenge is not interactive, so people who click it get no response.
- More than one state at a time. Two lozenges side by side are confusing.
Guidance
Do
In progressDone
Match the appearance to the meaning. Use the same colour for the same state across a screen.
Don't
DoneBlocked
Do not pick a colour that contradicts the word. People notice the colour before they read the word, so the wrong colour gives the wrong message.
Intensity
How much attention each of this component's grounds uses, scored against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| lozenge | neutral | 0.042Ambient | 0.066Substrate |
| lozenge--default | neutral | 0.042Ambient | 0.066Substrate |
| lozenge--inprogress | accent-blue-subtler | 0.095Ambient | 0.110Ambient |
| lozenge--lime | accent-lime-subtler | 0.081Ambient | 0.175Ambient |
| lozenge--magenta | accent-magenta-subtler | 0.096Ambient | 0.122Ambient |
| lozenge--moved | accent-orange-subtler | 0.076Ambient | 0.188Ambient |
| lozenge--new | accent-purple-subtler | 0.091Ambient | 0.127Ambient |
| lozenge--removed | accent-red-subtler | 0.092Ambient | 0.124Ambient |
| lozenge--success | accent-green-subtler | 0.081Ambient | 0.172Ambient |
| lozenge--teal | accent-teal-subtler | 0.077Ambient | 0.166Ambient |
| lozenge--yellow | accent-yellow-subtler | 0.077Ambient | 0.183Ambient |
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.
- One or two words, short enough not to wrap.
- Sentence case, not caps.
- Name the state, not the transition. Done, not Marked done.
- Use the same word for the same state everywhere. Two words for one state look like two states.