videorc/uiStatus Dot
Ambient status. The glass dot in its tone, pulsing while something runs, beside a quiet label. It replaces a loud header badge.
Installation
$ pnpm dlx shadcn@latest add @videorc/status-dotIt brings Status word with it.
Usage
import { StatusDot } from "@/components/status-dot";<StatusDot label="Recording" pulse tone="live" />It takes the same tones as Status Badge: live is recording and on air, error a failure. The label is a word in sentence case, already mapped from its state; a raw value throws under test.
Use it for ambient state in a header, a status bar or a row's meta. Use a Status Badge when the state needs a chip of its own.
Examples
In a header
The dot sits beside a window's or a pane's title and says what it's doing, without competing with the title.
Theming
| Token or attribute | Meaning |
|---|---|
glass-dot | The 6 px dot with its halo and glow |
motion-safe:animate-ping | The pulse; reduced motion stills it |
tone-* | The tone, through --chip-tone |
data-tone | good, warn, error, live or neutral |
Accessibility
Only the label is read; the dot is decoration. A dot with no label says nothing to a screen reader, so give the state a word somewhere nearby.
API reference
Prop
Type
Status 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.
Device Picker
The one picker for a screen, window, camera or microphone. A popover list with words for every state, so it's never blank while discovery runs or a device is gone.