StatusDot

Live Status Indicator - Square Instrument Dot, Tracked Label

01 Preview

02 Usage

Small status indicator - a square instrument dot in a semantic tone with an optional uppercase micro-label; set live to blink it as an active signal.

<StatusDot tone="accent" live>Live</StatusDot>
<StatusDot tone="ok">Operational</StatusDot>
<StatusDot tone="err">Offline</StatusDot>
<StatusDot tone="info" />

Tones: accent | ok | warn | err | info. The dot is decorative; the label carries the meaning, so give live/critical states a label. live freezes to a steady dot under reduced-motion. Keep labels to one or two words.

03 Props

Prop	Type	Default	Notes
tone	`'accent' \| 'ok' \| 'warn' \| 'err' \| 'info'`	`accent`	Dot colour.
live	`boolean`	`false`	Blink the dot to read as a live signal. Uses the `.ddk-blink` motion utility, which the OS "reduce motion" setting freezes to a steady dot.
children	`React.ReactNode`	—	Optional uppercase micro-label. Omit for a bare dot.

Also accepts every attribute of React.HTMLAttributes<HTMLSpanElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 Import

import { StatusDot } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';