Primitives

Badge

Compact inline label for status, category, or metadata. The tone prop carries semantic meaning (saved → green, drafting → amber, stopped → red). Combine with dot for a status-indicator style. Use outline for most contexts; solid where higher visual weight is needed.

Source · API

Examples

Loading examples…

API

From COMPONENTS.md.

Inline label for status, category, or metadata.

<Badge
  tone="saved"      // 'saved' | 'drafting' | 'stopped' | 'archived' | 'neutral' (default)
                    // | 'success' | 'warn' | 'danger' | 'info'
  variant="outline" // 'outline' (default) | 'solid' | 'pill'
  dot               // boolean — status dot
>
  Published
</Badge>

The tone is carried by the border and dot; the label is fg2, so it reads at 4.5:1 or better on any ground in either theme (no tone colour does as 10px text everywhere). A solid badge fills with the tone and sets its label in a colour chosen per theme to pass on it. The colours come from badgeTones in achery-ui/tokens, shared with the native Badge and StatusDot.