Components
StatusLabel
Labeled status pill with tone, optional dot, and pulse.
StatusLabel pairs a tone-coded dot with a text status.
Example
Preview
OnlineDegradedOfflineIdle
import { StatusLabel } from '@officina/ui';
<StatusLabel tone="success" pulse>Online</StatusLabel>
<StatusLabel tone="danger" variant="soft">Offline</StatusLabel>API
| Prop | Type | Default | Description |
|---|---|---|---|
| dot | boolean | true | Show a leading status dot. Ignored when `icon` is provided. |
| icon | ReactNode | — | Leading icon; replaces the status dot when set. |
| pulse | boolean | — | Animate a pulsing ring on the dot. |
| tone | enum | neutral | Semantic colour of the label and dot. |
| variant | enum | plain | `plain` is dot + text on the surface; `soft` wraps it in a tinted pill. |