Display
StatusDot
The dot beside a status word.
Examples
tones
Live Degraded Down Idle
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.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| pulse | boolean | true | A halo that grows and dissolves, for "live right now". Off for a settled state. |
| size | 'sm' | 'md' | 'md' | 7px / 8px. `md` is the default. |
| tone | StatusTone | 'success' | — |
Also accepts everything in HTMLAttributes<HTMLSpanElement>. Those are forwarded to the underlying element and are not listed row by row.
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.