Lozenge
A lozenge is a visual indicator used to highlight an item's status for quick recognition.
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 and that someone scanning a column needs to pick out without reading.
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, and drawing one where a button belongs invites a click that does nothing.
- More than one state at a time. Two lozenges side by side read as one confused state rather than two clear ones.
Guidance
Do
In progressDone
Match the appearance to the meaning, and keep one vocabulary across a screen so the same colour always says the same thing.
Don't
DoneBlocked
Do not pick a colour that fights the word. Someone scanning reads the colour first, so the wrong one says the wrong thing before the word is read.
Intensity
What each of this component's grounds spends, measured 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, 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.
- One or two words. A lozenge that wraps has stopped being a lozenge.
- Sentence case, not caps.
- Name the state, not the transition. Done, not Marked done.
- Keep the same word for the same state everywhere. Two words for one state read as two states.