StatusBadge
The state of a process — a workflow run, a deployment, an AI request.
The conflict it resolves
Ivy painted “needs a human” red-on-white for a dead-lettered run. Root painted it amber-on-black for a deployment awaiting approval. Both repos carried a comment saying “the one status that needs a human gets the only solid fill” — and both were the only one, in their own repo.
The fix was not to pick a winner. They are different kinds of needing a human: blocked is waiting on a decision and is entirely expected; critical means something broke and we gave up. Both are loud, and they should not look the same.
light
dark
The rule
Solid fills are reserved for “a person must act.” Everything else is a subtle tint. That is what makes a wall of a hundred rows readable at a glance — colour tells you severity, fill tells you whether it is your problem.
Tones, and the vocabulary mapped to them
Services keep their own words; Azalea owns the visual language. Adding a status is one line in the map — inventing a colour for it locally is the thing this replaced.
neutralNot started.
activeIn flight right now.
successResolved well.
warningTransient trouble that will resolve itself.
blockedWaiting on a person's decision. Expected, not an error.
dangerBroken, still recoverable.
criticalBroken, and we have stopped trying.
mutedDeliberately not run.
In a list
Where it actually gets used.
- SUCCESSLeave approved → notify2m ago
- NEEDS APPROVALEtalasse · production8m ago
- DEADDeployment succeeded → report1h ago
Guidance
Use it when
- The state of something that runs: a run, a deployment, a request, a health check.
- Anywhere a person scans many rows looking for what needs them.
Reach for something else when
- A category or a count — that is Badge.
- A status your service invented locally. Add it to STATUS_TONES instead, so it means the same thing everywhere.
- Overriding `tone` to make one screen prettier. That is exactly how the two answers happened.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| status | string | — | The status. Mapped through STATUS_TONES; unknown values fall back to neutral rather than throwing. |
| tone | StatusTone | derived | Override the derived tone. Rare — prefer adding the status to the map. |
Accessibility
Colour is never the only signal: the badge always shows its label as text. Someone who cannot distinguish the amber from the red still reads NEEDS APPROVAL and DEAD. Keep it that way — a colour-only variant would fail exactly the readers who most need the scanning affordance.