Status and feedback

Badge

components/ui/badge

Small status chips with a word and a dot.

ReadySyncingOfflineIdle

Craft notes

A 6px dot echoes the status; the word is what carries it
Dot colors come from the status tokens, so dark mode needs no extra rules
A 24px height keeps badges level with small buttons in a row

Play it

Switch themes and compare the dots. Each status reads by word first and color second.

Sounds: none, it stays quiet

Variants

Every prop combination the component supports. The chip on each card is the exact props it passes.

Ready
tone="ok"
Healthy and up to date.
Ready
Syncing
tone="warn"
Working, nothing to do yet.
Syncing
Offline
tone="bad"
Not working, needs attention.
Offline
Idle
tone="idle"
Waiting, nothing happening.
Idle
Label only
dot={false}
A plain tag without a status.
Beta