Components / Display / Status labelOpen in Figma
Status label
ReadyA small tinted label that says the status of a record in one or two words.
When to use
- A record has a status people scan for: in a list card, a detail screen or a log row.
- The status is one of a known set.
When not to use
| If people need to | Use |
|---|---|
| Show the status of a request or an approval in a list | Request card (status strip) |
| Filter a list by status | Chips |
| Show what happened over time | History |
Anatomy
check_circleStatus
- Container · required: tint of the meaning
- Icon · optional; use it for pending
- Label · required: the status in one or two words
Variants
| Variant | Purpose | Figma |
|---|---|---|
| Text only | The standard label | Designed |
| With icon | Adds a 16 icon before the word; use for pending, where the colour is weak | Temporary rule |
States
| State | When | What changes | Figma |
|---|---|---|---|
| Positive | Active, Approved, Entry, Completed | Positive fill, Dark green text | Designed |
| Pending | Upcoming, Waiting, Draft | Amber light at 30%, Amber text | Designed |
| Negative | Expired, Rejected, Denied, Not authorised | Red tint at 40%, Red text | Designed |
| Cancelled | Cancelled | Coral tint at 30%, Coral text | Designed |
| Neutral | Exit, Inactive, Auto | Black at 5%, Ink text | Designed |
Behaviour
- A label is read-only; it never opens anything.
- The status appears once per card or screen. Never repeat it as a colour stripe, a sentence or a second label.
- Pick the meaning from what the status means for the person, not from how it looks.
- A label never wraps; keep the word short enough to fit.
Phone and tablet
| Phone | Tablet | |
|---|---|---|
| Type | 12 Semibold | 14 Medium |
| Padding | 4 top and bottom, 8 sides | 4 top and bottom, 8 sides |
Content
| Part | Rule |
|---|---|
| Label | One or two words, sentence case, the same word everywhere for the same status |
| Spelling | "Cancelled", not "Canceled" |
Do and don't
scheduleUpcoming
DoAdd an icon or keep pending labels short; the yellow alone is hard to read.
Waiting for the second approver
Don'tWrite a sentence in a pending label.
ExpiredCancelled
DoUse the meaning that fits the status.
ExpiredCancelled
Don'tMake up a new colour for a status.
Related
Specs
Click a value to copy it.
| Part | Property | Phone | Tablet |
|---|---|---|---|
| Container | Padding | ||
| Corners | |||
| Label | Type | ||
| Icon | Size | ||
| Positive | Fill | ||
| Text | |||
| Pending | Fill | ||
| Text | |||
| Negative | Fill | ||
| Text | |||
| Cancelled | Fill | ||
| Text | |||
| Neutral | Fill | ||
| Text |
Accessibility
- The status is written in words; the colour only supports it.
- Readability scores: Positive 5.9, Neutral 7.2, Negative 3.7, Cancelled 2.7, Pending 1.8. Pending, Cancelled and Negative are below 4.5, so they keep short, known words, and pending adds an icon.
- Screen readers hear "Status:" then the label, after the record name.
Changes
| Date | Change |
|---|---|
| 26 Oct 2026 | Added from Figma; 12 Semibold on phone, 14 Medium on tablet. |
| 26 Oct 2026 | With icon added as a temporary rule for the low pending contrast. |