Display
StatusPill
A live state, named: a dot plus an uppercase mono label.
Usage
import { StatusPill } from '@misoto22/design'Notes
A live state, named: a dot plus an uppercase mono label in an outlined pill.
One component rather than a dot and a pill assembled per call site, which is how the same "available for work" chip ended up with three different dot sizes and two different pulse timings on one site.
A warning or danger tone is doubled by a visually-hidden severity word, so the tone survives the dot being hidden. It does not survive monochrome: the pill's own text is --ink-2 at every tone, and the state itself still belongs in the words the call site writes.
Anatomy
| Element | Description |
|---|---|
| Pillrequired | The outlined <span>: --radius-pill, a --rule-2 hairline, --paper ground, and deliberately uneven padding — 10px before the dot, 12px after the label — so the pair sits optically centred rather than mathematically. |
| Dotrequired | A StatusDot handed tone and pulse. It is aria-hidden, so it is not where the tone reaches a reader who cannot see it. |
| Labelrequired | children in the eyebrow idiom — 11px uppercase mono, tracking pulled back from 0.2em to 0.12em because a pill is a shorter run than a section kicker. |
| Severity | A visually-hidden “Warning” or “Error” at the warning and danger tones, so those two reach a reader through something other than a colour on a hidden dot. success and neutral add nothing: they are the absence of alarm, which is what a reader already assumes. |
Best practices
Do
- Put the state in the words anyway. The severity word reaches a screen reader and nothing else — the pill’s own text is --ink-2 at every tone, so on a monochrome screen “Degraded” in a warning pill and in a neutral one are still the same pill.
- Set pulse={false} once the state has settled — the default halo means “right now”, and an archived or shipped pill pulsing forever tells the reader something is live when nothing is.
- Take the whole pill rather than composing a dot and a span at the call site: that assembly is how the same “available for work” chip came out at three dot sizes and two pulse timings on one site.
Don’t
- It is not a live region. The pill is a plain <span>, so a state flipping from Available to Degraded while the reader is on the page changes silently — if the change is the news, the call site owns the role="status" around it.
- One per view, not one per row. The label is an uppercase eyebrow at 0.12em tracking — the loudest small type the system has — and a column of them down a table is Badge’s job, which is why Badge carries the same status tones in plain 12px mono.
Examples
default
The whole pill rather than a dot and a span assembled at the call site, which is how the same "available for work" chip came out at three dot sizes and two pulse timings on one site. tone reaches only the dot and the dot is aria-hidden, so the words have to name the state: "Partial outage" in a warning pill and in a neutral one are the same sentence to anyone who cannot see the colour.
settled and live
Every tone, with the pulse spent on the one state that is actually happening. The halo means "right now", so an archived or shipped pill left pulsing tells the reader something is live when nothing is. The pill is also a plain span and not a live region: a state that flips from Live to Degraded while the reader is on the page changes silently unless the call site wraps it in role="status".
one per view
One pill for the view, badges for the rows under it. The label is an uppercase eyebrow at 0.12em tracking — the loudest small type the system has — so a column of pills down a list is every row shouting the same way. Badge carries the same status tones in plain 12px mono, which is what a per-record state should look like.
- Build Passed
- Typecheck Passed
- Visual diff 2 changed
Accessibility
- The warning and danger tones are doubled by a visually-hidden severity word, because the dot that carries the colour is aria-hidden and has no name to give.
- success and neutral are silent on purpose: announcing “OK” before every settled pill is noise charged to the two tones worth interrupting for.
- Not a live region. A state that flips while the reader is on the page changes silently unless the call site owns a role="status" around it.