Status dot

Atomic status indicator dot with tone + optional pulse.

Default
Success
Warning
Danger
Info
Neutral
Inline Text

Service Status

  • API GatewayOperational
  • DatabaseOperational
  • StorageDegraded
  • Email DeliveryOutage
  • CDNUpdating
  • AnalyticsUnknown
Pulse
Live — active connection
Alert — requires attention
Processing — in progress
Syncing — fetching data
Sizes
sm
md
lg
Table Rows
JobStatusDuration
Data exportComplete2m 14s
Image resizeRunning0m 48s
Report buildStalled12m 03s
DB backupFailed1m 09s
Cache warmQueued—
Tones
SuccessHealthy, active, passing
WarningDegraded, slow, near-limit
DangerFailed, offline, critical
InfoPending, syncing, informational
NeutralUnknown, idle, disabled

Installation

npx shadcn@latest add @byronwade/status-dot

Props

PropTypeDefaultDescription
tone"success" | "warning" | "danger" | "info" | "neutral""neutral"Color tone.
size"sm" | "md" | "lg""sm"Dot size.
pulsebooleanfalseAnimated ping ring.