Components
All components
Data display

Status dot

A small status dot in a tone, with an optional pulse for live states.

Preview

Preview
light
Live Degraded Down Idle
dark
Live Degraded Down Idle

Code

<StatusDot tone="ok" pulse /> Live
<StatusDot tone="danger" /> Down

Import from @/components/ui.

Props

PropTypeDefaultDescription
tone"neutral" | "accent" | "ok" | "info" | "warn" | "danger""neutral"Colour.
pulsebooleanfalsePulse for live/active.

Related