Status Indicator
A persistent signal of a system or record's current condition — distinct from a message about something that just happened.
UI ComponentsA status indicator describes a condition that persists: this invoice is overdue, this server is degraded, this user is away. It differs from an alert, which asks for attention now, and from a toast, which reports an event and leaves. Status sits in the layout next to the thing it describes and changes only when the thing does.
The common failure is encoding status in colour alone. A green dot and a red dot are identical to a substantial share of users, in greyscale, and in bright sunlight. Pair colour with a word or a shape. And keep the vocabulary small and stable — a set of statuses that drifted to eleven values, three of which mean roughly “waiting”, is a data-model problem showing through the interface.
In practice
A logistics dashboard marked shipment state with coloured dots and a tooltip. An operator with deuteranopia read delayed shipments as on-time for weeks. Adding a one-word label beside each dot cost about 60px per row and removed the error entirely.
Where teams get it wrong
- Colour as the only carrier of status.
- Status vocabularies that grow past what people can hold in their head.
- Using a status indicator for a transient event that belongs in a toast.
- Stale statuses with no timestamp, so nobody knows whether “online” means now or an hour ago.
- Tooltip-only labels, unreachable on touch.
Learn more
You may ask
Frequently Asked Questions
What is the difference between a status indicator and a badge?
A status indicator shows a condition that persists and changes with the thing it describes. A badge is a small marker usually carrying a count or a label, and it does not imply an ongoing state.
Why should status not rely on colour alone?
Roughly one in twelve men has some form of colour vision deficiency, and colour disappears in greyscale, in glare and in print. A word or a shape alongside the colour costs almost nothing and removes the failure.
Related terms
All terms- BadgeA small, non-interactive marker showing a status or a count.
- AlertAn in-page message about something needing attention — persistent, placed where it applies, and gone only when the condition is.
- Toast NotificationA brief message that appears over the interface to confirm an action or report a problem, then disappears on its own.
- Data TableA grid of rows and columns for scanning, comparing and acting on records — the screen most B2B users spend their day inside.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us