UI — display

Badge

Tiny status pill in 6 variants and 2 sizes. CVA-driven — no runtime branching, just composable Tailwind classes. Optional leading dot or icon for richer states.

Sourcesrc/components/ui/badge.tsx

All variants

default · brand · success · warning · danger · outline

DefaultBrandSuccessWarningDangerOutline

Sizes

sm (20px) uses a mono/uppercase label; md (24px) uses the sans stack for richer labels.

NEWNew feature

With dot

A leading 2px dot picks up the variant's foreground colour — ideal for status indicators.

LiveDegradedOutageDraft

With icon

Pass any 12px icon via the icon prop — it sits to the left of the label.

AI generated