Installation
pnpm dlx shadcn@latest add https://asciicn.dev/r/status-dot.jsonUsage
import { StatusDot } from "@/components/asciicn/status-dot";
export function Presence({ away }: { away: boolean }) {
return <StatusDot status={away ? "offline" : "online"} />;
}Each state has its own glyph and colour, so the shape tells them apart even without colour:
| Status | dot | braille | Colour |
|---|---|---|---|
online | ●, pings ◉ ◎ | ⠶, pulses ⣿ | green |
busy | ◐, turns ◓ ◑ ◒ | ⣾, orbits ⣽ ⣻ ⢿ | orange |
offline | ○, still | ⠤, still | grey |
error | ✕, flashes × | ⣿, flashes ⠶ | red |
label replaces the state name next to the glyph, such as "Degraded" for a busy service. Set showLabel={false} to show the glyph alone; screen readers still hear the label.
Examples
Service health
The braille variant in a table, with labels for each service.
Changing state
A deploy that moves through every state every 2.2 seconds, at size="lg".
Props
| Prop | Type | Default |
|---|---|---|
| status The state to show. | Type: "online" | "busy" | "offline" | "error" | Default "online" |
| label Text next to the glyph and the name screen readers hear. | Type: string | Default The state, as in "Online" |
| showLabel Show the label. When false it is read to screen readers only. | Type: boolean | Default true |
| variant Geometric glyphs or one Braille cell per state. | Type: "dot" | "braille" | Default "dot" |
| animate Online pings, busy turns and error flashes. | Type: boolean | Default true |
| color Glyph colour override, a palette name or any CSS colour. | Type: AsciiColor | Default Green, orange, grey or red by state |
| size Glyph cell height: 12, 16 or 20px. | Type: "sm" | "md" | "lg" | Default "md" |
| cell Glyph cell height in CSS pixels. Overrides size. | Type: number | Default – |
Notes
- The root has
role="status", so screen readers announce a new state once, politely. The glyph is hidden from them; they hear the label. - The animation swaps one glyph a few times a second. It pauses offscreen and in hidden tabs, and with reduced motion each state holds its first glyph.
- The glyph is DOM text in
--ascii-font, one cell wide, so the label never shifts as it changes.