components / live-badge
live-badge.
"happening right now" — a pulsing dot, a word, and an optional detail. badge says what a thing is; this says what it is doing at this second, across four fixed states, with role=status so going live is announced. the pulse is an expanding ring rather than a blinking dot, and drops out under reduced motion.
live· 12 listeningconnectingawayoffline
live· 3 listening
installation
bunx @justin06lee/chrome@latest add live-badgeprops
| name | type | default | description |
|---|---|---|---|
| status | 'live' | 'connecting' | 'idle' | 'offline' | 'live' | |
| label | ReactNode | - | overrides the default word for the status. |
| detail | ReactNode | - | appended after a middot — a listener count, a bitrate, a room name. |
| size | 'sm' | 'md' | 'md' | |
| accent | string | '#fff' | css color of the dot when live. |
| className | string | - |