Components / Metrics
Status dot
A state as a dot and a word.
@fabrials/ui
Relay onlineObservation is 3 h oldAuthorization expiredSyncing historyConfigured, not verified
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { StatusDot } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
tone | neutral | info | success | warning | danger | The state's ink. |
label | ReactNode | The word; required, even when hidden. |
pulse | boolean | Only for something live right now; stops under reduced motion. |
Behavior
Colour never stands alone: the label is always there for assistive technology.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.