Display
StatusDot
The dot beside a status word.
Usage
import { StatusDot } from '@misoto22/design'Notes
The dot beside a status word.
aria-hidden without exception: the dot repeats a state the adjacent label already names, and a screen reader announcing "available" twice is worse than not announcing the decoration at all. If a call site has no visible label, the fix is a label, not an aria-label on the dot.
The halo is a separate absolutely-positioned ring rather than a box-shadow, because Law 2 of this system is that a shadow is never blurred — and it is motion-safe, so a reader who asked for less motion gets a static dot.
Anatomy
| Element | Description |
|---|---|
| Boxrequired | The aria-hidden <span> the whole thing lives in — 8px square at md, 7px at sm, inline-grid and shrink-0 so it stays circular in a flex row however long the label beside it runs. |
| Dotrequired | An absolutely-positioned filled circle in --ok, --warn, --danger or --ink-3-aa. It is the only part of this component tone touches. |
| Halo | A second ring of the same colour on the m22-halo keyframes, present only while pulse is true. A separate element rather than a box-shadow, because a shadow in this system is never blurred. |
Best practices
Do
- Set pulse={false} for anything settled. It defaults to true, so a dot for a build that finished or a status that will not change today carries a halo announcing that something is happening right now.
- Reach for StatusPill the moment you find yourself writing the dot and its label together — that pairing assembled per call site is how one site ended up with three dot sizes and two pulse timings for the same state.
- Let it sit directly in the flex row beside its label: shrink-0 is what keeps it round, and a dot wrapped in a div that can shrink comes out an ellipse as soon as the label runs long.
Don’t
- An aria-label on the dot buys nothing — aria-hidden is still set, and a hidden element has no name to give. A call site with no visible label is a state no screen reader ever reports.
- sm and md are 7px and 8px, one pixel apart. That is an optical adjustment for sitting beside smaller type, not a size scale, and nothing in a layout should be built on the difference.
Examples
tones
The four tones, each next to the word that names it. The dot is aria-hidden without exception, so the tone is the one part of this component assistive tech never sees and the label has to carry the state on its own — an aria-label on the dot buys nothing, because a hidden element has no name to give. Only the live one pulses; everything settled sets pulse to false.
live and settled
The same tone, twice: pulsing means something is happening right now, and it is the default — so a dot for a build that finished, or a status that will not change today, announces work that is not being done unless pulse is set to false. The halo is motion-safe, so a reader who asked for less motion gets the still dot either way.
down a table
A column of states, at the size the dot is for. sm is 7px against md's 8px — an optical adjustment for sitting beside smaller type, not a size scale, so nothing in a layout should be built on the difference. The dot sits directly in the flex row beside its label: shrink-0 is what keeps it round, and one wrapped in a box that can shrink comes out an ellipse as soon as the label runs long.
| Service | State | Last check |
|---|---|---|
| api.misoto22.com | Healthy | 30s ago |
| Search index | Rebuilding | 2m ago |
| Image pipeline | Paused | 1h ago |
Types
export type StatusTone = 'success' | 'warning' | 'danger' | 'neutral'Accessibility
- aria-hidden without exception: it repeats a state the adjacent label already names.
- The halo is motion-safe, so a reader who asked for less motion gets a still dot.