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.
NLOnline
ARIn a meeting
JDAway
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
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| tone | Optional | StatusDotTone | neutral | online | away | busy | offline | neutral. |
| placement | Optional | "inline" | "avatar" | inline | Avatar anchors bottom-right; sage-wedge uses a double-pointed wedge with surface outline. |
| pulse | Optional | boolean | false | Ping ring for live or in-progress status; respects prefers-reduced-motion. |
| size | Optional | "sm" | "md" | "lg" | md | Dot diameter. |