Components
Status badge
A status pill with a living dot: it pulses when online or live, blinks on an outage, spins for maintenance. For presence, streams and status pages.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { StatusBadge } from '@vizzele/react';
<StatusBadge status="operational" />
<StatusBadge status="live" />
<StatusBadge status="online">Ada is online</StatusBadge>
<StatusBadge status="busy" dotOnly />Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | 'online' | 'away' | 'busy' | 'offline' | 'live' | 'operational' | 'degraded' | 'outage' | 'maintenance' | — | Sets the colour, the motion and the default text. |
children | ReactNode | — | Your own text. |
dotOnly | boolean | — | Just the dot; the text stays for screen readers. |
Accessibility
- The state is always written in words, never shown by colour alone — even dotOnly keeps the text for screen readers.
- Pulses and blinks stop with reduced motion.