Status badge

status-badgeStatus and feedback

A labelled status with a leading dot. The label always carries the meaning, so colour is never the only signal.

Registry JSON
bunx --bun shadcn@4.17.0 add @waimakers/status-badge
Kit dependencies
utilsthemebadge
npm dependencies
None

From the registry

A labelled status with a leading dot: attention uses the action fill, danger/ok/info use readable washes, neutral is outlined, and progress is outlined with a dot that stops pulsing under reduced motion. Exports Tone for exhaustive domain maps.

Examples

Tones

Attention is the one fill and asks for action. Danger, ok and info use readable washes. Neutral and progress stay outlined.

Needs reviewFailedRunningScheduledPausedSyncing

In context

Statuses sit beside the thing they describe, here a short list of agents.

  • Meeting notesAnna
    Running
  • Weekly digestPaul
    Scheduled
  • Invoice readerTamar
    Failed
  • Onboarding guideJoost
    Paused

Progress

The progress dot pulses while work runs, and holds still under reduced motion.

Indexing 12 of 40 documentsTranscribing