StatusDot
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Default#
Synced · 2m ago
All#
Loading…
Custom color#
Pass any CSS color via the color prop for one-off cases outside the semantic states (ok / warn / err / off / sync / accent). When set, color takes precedence over state at runtime. Invalid colors fall back to the default state; in dev, a console.warn names the offending value.
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| state | enum | ok | Semantic state. Default `'ok'`. |
| color | string | undefined | — | Arbitrary CSS color override. When set, replaces the state-derived color. |
| label | ReactNode | — | Optional label rendered next to the dot. |
| pulse | boolean | undefined | — | Pulse the dot — used for `sync` state to indicate live activity. |
| size | number | undefined | 8 | Pixel diameter. Defaults to 8px. |