A small, lightweight component for displaying tags, labels, and status indicators.
npx micomponents-cli add badgeimport { Badge } from "@/components/ui/badge";<Badge variant="subtle">
New
</Badge>Use different variant props to display badges with different styles.
Badges work great for displaying status, tags, and labels alongside text content. Use className to customize spacing and positioning.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | subtle | success | secondary | warning | important | black | white | subtle | The badge style variant |
| children | ReactNode | - | Badge content/text |
| className | string | - | Additional custom classes |