Components

StatusDot

A small circular indicator that communicates the current status of an entity through color and optional pulse animation.

Overview

StatusDot is a tiny colored circle that indicates status — online, offline, busy, away, etc. Supports a pulsing animation for active/live states.

<StatusDot status="online" />
<StatusDot status="offline" />
<StatusDot status="busy" pulse />
<StatusDot status="away" />

Prop	Type	Default	Description
`status`	`'online' \| 'offline' \| 'busy' \| 'away' \| 'idle'`	`'offline'`	Status type
`pulse`	`boolean`	`false`	Pulsing animation
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Dot size
`label`	`string`	—	Accessible label

Component	When to Use Instead
Badge	Count or label indicator
Avatar	User image with status dot

StatCard

A formatted numeric display with label, value, and optional trend indicator for dashboards.

Tag

A small labeled element for categorizing, filtering, or displaying metadata.