Skip to main content

Status Dot

Presence indicator for avatars, tables, and list rows.

Tones

OnlineAwayBusyOfflineNeutral

Pulsing (live / in progress)

LiveLive
DeployingDeploying
SyncingSyncing

Static vs pulse

Steady

api-gateway · Operational

Pulsing

ingest-worker · Processing

Pulsing sizes

Small pulseMedium pulseLarge pulse

On avatar

Use placement="avatar" inside a relative wrapper. Sage-wedge keeps the wedge marker with the double-pointed wedge (tab-indicator shape) and a surface outline, like the circular ring on other themes.

Online
In a meeting
Away

Sizes

Beside label

api-gateway· Operational
worker-east· Deploying

In a row (table-style)

  • Primary DB· Active
  • Cache
  • Queue

Reduced motion

Pulse uses animate-ping with motion-reduce:animate-none — the ring stops when the OS requests reduced motion.

API

PropRequiredTypeDefaultDescription
toneOptionalStatusDotToneneutralonline | away | busy | offline | neutral.
placementOptional"inline" | "avatar"inlineAvatar anchors bottom-right; sage-wedge uses a double-pointed wedge with surface outline.
pulseOptionalbooleanfalsePing ring for live or in-progress status; respects prefers-reduced-motion.
sizeOptional"sm" | "md" | "lg"mdDot diameter.