A short label for a status or a count: six variants, nine tones for status and identity, four sizes, and an optional dot, icon and tooltip.
npx shadcn@latest add @sphere-kit/badgeimport { Badge,} from "@/components/ui/badge"4 rules for using it well. Open one to see it drawn.
Exports Badge badgeVariants. Every part takes its element's usual props and a className.
| Prop | Options | Default |
|---|---|---|
| variant | defaultsecondarydestructiveoutlineghostlink | default |
| tone | neutralredorangeamberyellowgreencyanbluepurple | – |
| size | xssmdefaultlg | default |
| shape | pillsquare | pill |