← Back to Docs

Status Indicator Dot

A minimal 8px–12px dot conveying system state through color, pulse animation, and optional tooltip.

Variants

Online
Degraded
Offline
Unknown

Sizes

8px (inline)
12px (default)
16px (prominent)

With Label

License Active
Heartbeat Lost

Usage

<span className="inline-block w-3 h-3 rounded-full
  bg-emerald-400
  shadow-[0_0_8px_rgba(52,211,153,0.6)]" />

Wrap in a flex container with items-center gap-2 for label alignment. Use animate-pulse for transient states.