Mittsu
GitHub
Back to Components

Display

Badge

Small label for status / count / tag. Six variants, two sizes.

Examples

Variants

Neutral Accent Success Warn Danger Outline
<Badge>Neutral</Badge>
<Badge variant="accent">Accent</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warn">Warn</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="outline">Outline</Badge>

Small

12
<Badge size="sm" variant="accent">12</Badge>

Props

PropTypeDefaultDescription
variant'neutral' | 'accent' | 'success' | 'warn' | 'danger' | 'outline''neutral'Color tier or outline.
size'sm' | 'md''md'Use sm for inline counts inside a button.

Install

CLI

npx @a3tai/mittsu add badge