videorc/uiStatus Badge
The status pill, a round glass chip. The words stay monochrome and the tone glows in its dot; a failure or an on-air session tints the whole chip.
Installation
$ pnpm dlx shadcn@latest add @videorc/status-badgeIt brings Status word with it, for the tones and the raw-value guard.
Usage
import { StatusBadge } from "@/components/status-badge";<StatusBadge label="Chat" tone="good" value="Connected" />value is a word in sentence case, already mapped from its state ("Reconnecting", "On air"). The badge never recases it, and a raw value such as device-missing throws under test.
Use it for a state that needs a chip: a connection, a destination, a device. Don't color the words, and don't hand-roll a rounded span for a status: that's this or a Badge.
Examples
Labels and icons
label adds a muted word before the value. A leading icon replaces the dot and takes the tone, except on error and live, where the whole chip carries it.
Theming
| Token or attribute | Meaning |
|---|---|
glass-chip, glass-dot | The chip and its glowing 6 px dot |
glass-chip-tinted | The emphasis chip for error and live |
tone-success, tone-warning, tone-destructive, tone-live, tone-neutral | The tone, through --chip-tone |
data-tone | good, warn, error, live or neutral |
Accessibility
The badge is text: the value is read as it's written, and the dot and the icon are hidden from screen readers. The tone is never the only signal, because the word says it too.
API reference
Prop
Type
StatusTone and STATUS_TONE_CLASS are re-exported from Status word, for a readout that draws its own status in the same tones.
Media Card
A card for an object with a picture, such as a scene, a background or a takeover screen. The row radius, a 4% fill, a hairline and no shadow; the one in use wears the chrome plate.
Status Dot
Ambient status. The glass dot in its tone, pulsing while something runs, beside a quiet label. It replaces a loud header badge.