StatusDot
status-dotPairs a status label with a colored dot and optional animated activity state.
Usage
Health status
Four semantic states: online, degraded, offline, and maintenance. Colors are derived from tone.
OnlineDegradedOfflineUnder maintenance
tsx
<>
<StatusDot status="online" label="Online" />
<StatusDot status="degraded" label="Degraded" />
<StatusDot status="offline" label="Offline" />
<StatusDot status="maintenance" label="Under maintenance" />
</>Tail value slot
extra slot placement delay/success rate and other values, tabular-nums aligned.
Gateway A86msGateway B412ms
tsx
<>
<StatusDot status="online" label="Gateway A" extra="86ms" />
<StatusDot status="degraded" label="Gateway B" extra="412ms" />
</>Pulse
online Default respiratory pulse; can be switched explicitly with pulse.
Automatic pulseForced pulseTurn off pulse
tsx
<>
<StatusDot status="online" label="Automatic pulse" />
<StatusDot status="degraded" label="Forced pulse" pulse />
<StatusDot status="online" label="Turn off pulse" pulse={false} />
</>Dimensions & Dots Only
size controls the dot size; only dots are rendered when label is omitted.
tsx
<>
<StatusDot status="online" size="sm" />
<StatusDot status="online" size="md" />
<StatusDot status="online" size="lg" />
</>When to use
Use StatusDot for a channel, model, or service health row. It wraps Dot with four health meanings, text, and a metric slot. Use Badge for counts.
Import
ts
import { StatusDot } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| status* | "online"|"degraded"|"offline"|"maintenance" | — | Maps to success, warning, danger, or neutral. |
| pulse | boolean | Online only | Explicitly overrides automatic online pulse. |
| size | "sm"|"md"|"lg" | md | Size. |
Slots
| Slot | Type | Description |
|---|---|---|
| label | ReactNode | Status text announced with the dot. |
| extra | ReactNode | Trailing latency or success metric. |
Usage notes
Only online pulses by default; pass pulse to animate another state. Backend status and macOS menu-item notes are unrelated.
Related
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
Online
<StatusDot status="online" size="md" pulse label="Online" />