Status Badge
readySemantic status pill that maps a status string to a color tone.
The Status Badge turns an application status into a color-coded pill with a leading dot. It powers the Application Status column in the Sub Table and Table screens, replacing plain text with a scannable signal.
Anatomy
- 1 Dot — tone-colored indicator for quick scanning
- 2 Label — the status text, as provided
Tones
The status string is matched (case-insensitive) to a tone; unknown values fall
back to neutral.
<StatusBadge status="Approved" />
<StatusBadge status="Under Review" />
<StatusBadge status="Denied" />
<StatusBadge status="Waiting on applicant" />
<StatusBadge status="Withdrawn" />Registration states
The registration screens pass the display labels from
src/data/registration/labels.ts straight through, so every application and
requirement state resolves to a tone.
<StatusBadge status="Met" />
<StatusBadge status="In progress" />
<StatusBadge status="Awaiting third party" />
<StatusBadge status="Blocked" />
<StatusBadge status="Not started" />States
Success
approved · active · complete · met
Warning
under review · pending · submitted · in review · in exception review · awaiting third party
Danger
denied · rejected · refused · not met · blocked
Info
waiting on applicant · awaiting applicant · in progress
Neutral
withdrawn · closed · draft · not started · unknown
Usage
Use for a bounded set of known statuses.
Don't pass free-form sentences — it's a status label.
Accessibility
- The dot is decorative; the status text carries the meaning, so it never relies on color alone.
- Keep the visible label identical to the underlying data value.
Content
- Use the canonical status values (“Approved”, “Under Review”, “Denied”, “Withdrawn”). Add new statuses to the tone map to color them.
- For registration screens, pass the label helpers from
src/data/registration/labels.tsrather than raw dataset enums — they emit exactly the strings the tone map keys on.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
status | string | — | Status text; matched to a tone, displayed as-is. |
Tone map:
| Tone | Statuses | Tokens |
|---|---|---|
| success | approved active complete met | --color-success / --color-success-tint |
| warning | under review pending submitted in review in exception review awaiting third party | --color-warning / --color-warning-tint |
| danger | denied rejected refused not met blocked | --color-danger / --color-danger-tint |
| info | waiting on applicant awaiting applicant in progress | --color-info / --color-info-tint |
| neutral | withdrawn closed inactive draft not started · anything unmatched | --color-neutral / --color-neutral-tint |
info reads as “live, but nothing is wrong” — it marks the turn sitting with
someone rather than a problem needing attention.
Related
- Data Table — renders this in its status column.
- Badge — count / label pill.
- Tokens — the status color tokens.