Status
Colored dot with a label communicating the state of a system or entity
Category: display · WCAG 2.2-AA · status, indicator, dot, badge
Variants
- success
- warning
- error
- info
- neutral
Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | 'success' | 'warning' | 'error' | 'info' | 'neutral' | neutral | Status state. |
pulse | boolean | false | Pulses the dot — gated behind prefers-reduced-motion: no-preference |
Design tokens
--cascivo-color-success--cascivo-color-warning--cascivo-color-error--cascivo-color-info--cascivo-color-text-muted--cascivo-color-text--cascivo-radius-full
When to use
- 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
- A static category or count label — use Badge
- An identity thumbnail with presence — use Avatar with its status prop
How to build an accessible Status in React →
Examples
Default
<Status>Unknown</Status>Success
<Status status="success">Operational</Status>Pulsing
The pulse animation respects prefers-reduced-motion
<Status status="info" pulse>Deploying</Status>