Tiny state indicator. 8 × 8 px with a paired label — the dot never stands alone for accessibility reasons.
Live
Match in progress Pending
Awaiting approval Scheduled
Not started Failed
Last run errored Official
Sanctioned event tsx · view.tsx
import { StatusDot } from '@petanque-life/shared';
<StatusDot tone="live" label="Live" pulse />
<StatusDot tone="pending" label="Pending approval" />| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "live" | "pending" | "neutral" | "error" | "brand" | "neutral" | Semantic colour. |
| label | string | — (required) | Required — the dot alone is not accessible. |
| pulse | boolean | false | Adds a pulsing ring; respects reduced motion. |
| size | "sm" | "md" | "md" | 8 px or 10 px. |