A small colored dot that communicates status like online/offline presence or severity levels. Supports five semantic variants and an optional pulse animation. Always pair with a visible text label, as color alone should not carry meaning.
ts
import{XDSStatusDot}from'@xds/core/StatusDot'
Best practices
Guidance
Practices
Do
Always pair with a visible text label so status is not conveyed by color alone.
Do
Provide a descriptive `label` prop for screen reader accessibility.
Don't
Use the pulse animation for purely decorative purposes — reserve it for states that require immediate attention.
Don't
Rely on color alone to communicate status — always include text.
Examples
Common configurations, variations, and states.
StatusDot — Pulsing
Animated pulsing dots for live, processing, and error states.
StatusDot — Status Indicators
Labeled status dot list for presence indicators like online, away, and offline.
StatusDot — Variants
All five semantic color variants displayed in a row.