Status

Feedback

A dot-and-label pair for presence and system state.

The Status pairs a colored dot with a label. It works for presence indicators, service health, and any small state readout.

npx shadcn@latest add status

Variants

Online, away, busy, and offline presets.

Preview

Live

Jane DoeAwayIn a callOffline

tsx

1<Status label="Jane Doe" dot="online" pulse />
2<Status label="Away" dot="away" />
3<Status label="In a call" dot="busy" />
4<Status label="Offline" dot="offline" />

Pulse

Add pulse to draw the eye to a live status.

Preview

Live

Jane DoeAwayIn a callOffline

tsx

1<Status label="Broadcasting" dot="online" pulse />

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
dot	"online" \| "away" \| "busy" \| "offline"= "online"	Color of the dot and default label.
label	string	Text shown next to the dot. Defaults to the dot name.
pulse	boolean= false	Animates the dot to signal live activity.
className	string	Custom classes for the root.