Status

A dot and a word for the state of one thing: a pod, a job, a deploy. The traffic light colors everyone already reads as status, with the word always saying the state, so color is never the only signal.

CSS: css/components/status.css

01 — Variants

Tones

Success, warning and error, plus info for “in progress” and the neutral gray for unknown. The text is in the status’s text tone and the dot in its stronger mark tone.

Running Pending Failed Updating Unknown

Busy

.status--busy pulses the dot while the state is still changing. It stops with reduced motion.

Rolling out Restarting

In a table

The status column of a list of records. Put the table (or just the column) in a live region if it updates while the page is open.

Pod	State	Restarts
`api-7f9c4d-x2k8q`	Running	0
`worker-5b8d-q7m2p`	Updating	0
`web-66c9-hh41z`	Pending	2
`cron-1a2b-zz90k`	CrashLoopBackOff	14
`job-9e7f-pp03c`	Unknown	0

With badges, notices and progress

The same five tones run through .badge, .notice and .progress.

Healthy Degraded Down Syncing

Rolling update

3 of 6 replicas are on the new version.

02 — Usage

Use it for

The state of a thing: running, pending, failed, unknown.
Status columns in tables and lists.
Small status next to a title, such as a cluster’s health.

Avoid

Status colors for decoration or for chart series. They always mean something; chart colors never do.
A dot with no word. Color alone fails people who can’t tell the hues apart.
Long messages. Use a .notice with the matching tone.

03 — Accessibility

Notes

The word carries the meaning; the dot only reinforces it.
Every status text tone is at least 7.19:1 on glass and every mark at least 3.05:1. The numbers are in docs/accessibility.md.
When a status changes while the page is open, put it inside role="status" or aria-live="polite" so screen readers hear it.