Status indicator
A small coloured dot + label. The single most repeated micro-component — it tells the operator what state a row is in at a glance.
Tones
Four canonical tones plus a ring variant for "unread" or "open".
Needs input
Running
Completed
Idle
Not started
Canonical labels
Five words. Never invent a new one.
| Label | Tone | Meaning |
|---|---|---|
| Needs input | attention | The user owes the system something. Action required. |
| Running | progress | The system is working on it. No user action needed. |
| Completed | ok | Done. Successful. Past tense. |
| Idle | idle | Started but currently paused or waiting. |
| Not started | ring | Created but no work has begun. |
In rows
The way it normally appears — inside a list or table row.
Shipment SH-2839
Late settlement · 4 days overdue
Shipment SH-2841
In transit · arriving 04 Jun
Shipment SH-2837
Settled 28 May · paid in full
Anatomy
| Property | Value | Notes |
|---|---|---|
| dot | 6 × 6 px | — |
| radius | 50% | Ring variant: 1.5 px border + transparent fill |
| gap | 6 px | Between dot and label |
| font | 500 13 / 1.4 sans | Same colour as the dot |
| canonical | 5 labels | Never invent new ones |
Do & don't
Do
Always pair the dot with text. A colour alone fails accessibility tests.
Don't
Mix status dots and badges in the same column. Pick one.
Do
Use the ring variant for "Not started" — the empty circle reads as an unfilled state.
Don't
Add a sixth status label. If the existing ones don't fit, the workflow needs to be broken into steps.
Code
<span class="status-dot attention">Needs input</span> <span class="status-dot ok">Completed</span>