Status Dot

Rippling status dot with deployment states.

Installation

npx shadcn@latest add @iconiq/status-dot

Compact status row with a rippling dot and optional label, using CSS keyframes for a stable halo animation in light and dark mode.

state"QUEUED" | "BUILDING" | "ERROR" | "READY" | "CANCELED"

Required

Selects the dot color and default label for common deployment or pipeline states.

labelstring

Optional text override. When omitted, the component falls back to the label mapped from `state`.

Each state maps to a fixed color token suited for deployment dashboards and build logs.

Ripple strength adapts through CSS `dark:` visibility layers, so theme changes do not require JavaScript observers.

Ripple motion uses CSS keyframes for reliable playback in production and disables when `prefers-reduced-motion: reduce` is enabled.

Pass an empty string for `label` to render a dot-only indicator; the default state label is still exposed to screen readers.

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: none.