Status Dot @astryx-svelte/core v0.5.2 · StatusDot
Usage
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
Best practices
| Guidance | Practices |
|---|---|
| Do | Use StatusDot as a binary present/absent signal; avoid encoding many distinct states in a single dot, since color and size alone cannot reliably distinguish them. |
| 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. |
| Do | Pair the dot with an icon that carries the status as a distinct shape when it must stand on its own without adjacent text, so meaning survives without color. |
| Do | If you can't add a label or an icon, make sure the status is conveyed elsewhere accessibly (e.g. adjacent text, a table column, or a live region). |
| Don't | Rely on color alone to communicate status; StatusDot is not fully accessible in isolation, so the builder must make the status distinguishable in context via a label, an icon, or an accessible alternative. |
| Don't | Use the pulse animation for purely decorative purposes; reserve it for states that require immediate attention. |
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.