ui/components/status-indicator

Status Indicator

Compact status readout with a shape-coded status marker and uppercase label. Renders role=status for assistive technologies.

Preview

tsx

1 import { StatusIndicator } from "@/components/ui/status-indicator";2 3 export default function StatusIndicatorDefault() {4   return (5     <div className="flex flex-col gap-4">6       <StatusIndicator label={null}>Online</StatusIndicator>7       <StatusIndicator status="busy" label={null}>8         Busy9       </StatusIndicator>10       <StatusIndicator status="offline" label={null}>11         Offline12       </StatusIndicator>13       <StatusIndicator pulse={false}>No pulse</StatusIndicator>14     </div>15   );16 }17

Installation

$pnpm exec dgadd add ui/status-indicator

[Installs to]src/components/ui/status-indicator[Item]ui/status-indicator

dgadd ships in @diffgazer/add on npm: pnpm add -D @diffgazer/add puts it on pnpm exec, and npx @diffgazer/add runs it without the install.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS from the installed package.

Usage

tsx

1 import { StatusIndicator } from "@/components/ui/status-indicator";2 3 export default function StatusIndicatorDefault() {4   return (5     <div className="flex flex-col gap-4">6       <StatusIndicator label={null}>Online</StatusIndicator>7       <StatusIndicator status="busy" label={null}>8         Busy9       </StatusIndicator>10       <StatusIndicator status="offline" label={null}>11         Offline12       </StatusIndicator>13       <StatusIndicator pulse={false}>No pulse</StatusIndicator>14     </div>15   );16 }17

Examples

Inline in a panel header and rows

Preview

tsx

1 import { StatusIndicator } from "@/components/ui/status-indicator";2 3 const services = [4   { name: "api.diffgazer.dev", status: "online", label: "Online" },5   { name: "worker.queue", status: "busy", label: "Busy" },6   { name: "cache.redis", status: "offline", label: "Offline" },7 ] as const;8 9 export default function StatusIndicatorInline() {10   return (11     <div className="w-full max-w-sm border border-border">12       <div className="flex items-center justify-between border-b border-border px-3 py-2">13         <span className="font-mono text-xs font-bold text-foreground">SERVICES</span>14         <StatusIndicator label={null}>Operational</StatusIndicator>15       </div>16       <ul>17         {services.map((service) => (18           <li19             key={service.name}20             className="flex items-center justify-between gap-4 border-b border-border px-3 py-2 last:border-b-0"21           >22             <span className="font-mono text-xs text-foreground">{service.name}</span>23             <StatusIndicator status={service.status} label={null}>24               {service.label}25             </StatusIndicator>26           </li>27         ))}28       </ul>29     </div>30   );31 }32

API Reference

StatusIndicator

Name	Type	Default	Description
status	"online" \| "offline" \| "busy"	"online"	Semantic status. Drives the dot shape and color and the default sr-only status word.
pulse	boolean	true	Animate the dot. Only the online status animates; busy and offline never pulse.
label	string \| null	the status value	Screen-reader status word announced beside the color-only dot. Defaults to the status value; pass null to suppress it when the children already state the status.
children	ReactNode	—	Uppercase label text shown beside the dot.
className	string	—	Additional classes on the root status element.

Accessibility

Notes

Pulse

Pulse defaults to true, but the dot only animates when status='online' (a compound variant in statusIndicatorDotVariants). Set pulse={false} to disable animation. Honors prefers-reduced-motion via motion-reduce:animate-none.

Shape and color

Every status carries its own marker shape so the states stay apart without relying on hue: online is a filled circle (success), busy is a filled square (warning), offline is a hollow circle (muted-foreground). The shape also keeps online readable mid-pulse, when its opacity dips toward the offline tone.

Accessible status word

The marker is decorative (aria-hidden), so the root renders an sr-only status word (defaulting to the status value) for screen-reader users. Override the word with the label prop, or pass label={null} to suppress it when the visible children already state the status.

Live region

The root renders role="status" — an implicit polite live region — so screen readers announce label changes without interrupting.

Source

Install via CLI: pnpm exec dgadd add ui/status-indicator.

Highlighted source loads after this disclosure opens. Browse the source repository.