How to build an accessible Status in React
Meaning is carried by the text label, never by the dot color alone; the pulse animation is gated behind prefers-reduced-motion: no-preference so it never animates for users who opt out
When to use a Status
- Communicating the live state of a system or entity (operational, deploying, down)
- Pairing a colored dot with a text label for an at-a-glance state
- Drawing attention to an active/changing state with an optional pulse
When not to use it
- A static category or count label — use Badge
- An identity thumbnail with presence — use Avatar with its status prop
Accessibility
Role none, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <Status status="success" /> with no label
Prefer: <Status status="success">Operational</Status>
A bare colored dot conveys nothing to color-blind or screen-reader users; always pair with text
Example
<Status>Unknown</Status>