Status
Says where a piece of work stands.
Status
- Idle
idledefault
- Queued
queued
- Running
running
- Passed
ok
- Warning
warn
- Failed
fail
- Waiting on you
waiting
Sizes
- Passed
defaultdefault
- Passed
sm
Usage
When to use it
- Use
- A row, header or card shows work that moves from queued to running to an outcome.
- Use
- Work stops until a person acts: status="waiting".
- Use
- A column of runs, sorted by statusRank so failures come first.
- Not for
- A label that never changes, such as a version or an environment. Use Badge.
- Not for
- How far the work got. Use Progress.
- Not for
- The outcome needs a sentence and an action. Use Alert.
Rules
9 rules
- Never
- Show a status as a coloured dot, square or tint, with or without a word; use Status, a glyph and a word. Because a dot says only that something is there, so ok, warn and fail differ by hue alone, which vanishes in grayscale and forced colours, and a screen reader reads nothing.
- Never
- Give queued or idle a glyph of their own; they take none, with the word in text-2. Because a glyph is how the eye finds a row that needs it, so a mark on every waiting row buries the one that failed.
- Must
- Keep green, amber and coral for ok, warn and fail; work on the way stays ink. Because colour means an outcome in Glaze, so a green running row reads as done before it is.
- Must
- Set live on the one status the person is watching and on no other in the view. Because each live Status holds its own status region, so a page of rows reads every run that settles, one over another.
- Never
- Add a spinner beside a running Status; its glyph is the arc. Because two turning marks on one row double the only loop Glaze allows.
- Must
- Sort a status column by statusRank, fail first, never by the word. Because sorting by the word puts Failed between Idle and Passed, so failures never reach the top.
- Never
- Show work paused on a person as warn; use status="waiting". Because an approval is a normal step, and an amber row sends the operator looking for a fault that is not there.
- Should
- Override the word with one to three words that keep the outcome, never a sentence.
- Must
- Give a StatusMark on its own a label. Because without one the glyph is aria-hidden, and queued and idle draw nothing, so a screen reader skips the status entirely.
State order
7 states, highest first
- 1
- fail
- 2
- waiting
- 3
- warn
- 4
- running
- 5
- queued
- 6
- ok
- 7
- idle
Accessibility
5 checks
- The word is the status; colour is never the only signal, and each glyph differs in shape: check in a ring, triangle, cross in a ring, hourglass, arc.
- Passed, Warning and Failed are 5.7:1 or better on paper in light and dark, glyph and word in one colour; queued and idle are text-2, 5.5:1.
- A live status speaks once through a polite status region when it settles; the visible word is aria-hidden meanwhile.
- The glyph is aria-hidden beside the word; a lone StatusMark is role="img" with its label, or only its label when queued or idle.
- Status is not focusable.
Edge cases
6 edge cases
- Long word
- Wraps under itself; the glyph stays on the first line.
- Many running rows
- Show one running count in the header instead of a dozen turning arcs.
- Run never returns
- Stays running and live stays silent; the caller sets warn after its deadline.
- Right to left
- The glyph sits at the start and the word follows.
- Reduced motion
- The arc stops, stays drawn, and the word still says Running.
- Forced colours
- Glyphs draw in CanvasText; their shapes and the word carry the meaning.
API
5 props
status'idle' | 'queued' | 'running' | 'ok' | 'warn' | 'fail' | 'waiting'default'idle'size'default' | 'sm'default'default'livebooleanchildrenReactNodeStatusMark labelstring
Tokens
9 tokens
--ok-text- #1a7640
--warn-text- #8a5a00
--fail-text- #b23c29
--text-1- rgb(5 5 5 / 0.80)
--text-2- rgb(5 5 5 / 0.60)
--icon-sm- 12px
--type-label- 500 13px/1.35 var(--font-sans)
--type-label-sm- 500 12px/1.35 var(--font-sans)
--dur-spin- 800ms