Status Dot · astryx-svelte

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
 
import { StatusDot } from '@astryx-svelte/core';

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.