Components / Properties / Badge
Badge.
FreePrimitiveA compact property chip with semantic variants.
Demo dataResponsive
DefaultSecondaryOutlineDestructive
Installation
pnpm dlx shadcn@latest add https://elements.micropreneur.dev/r/badge.jsonThe shadcn CLI writes the source into your project. Files added:
- components/ui/badge.tsxui
- lib/utils.tslib
Dependencies@base-ui/reactclass-variance-authorityclsxtailwind-merge
API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'secondary' | 'destructive' | 'outline' | 'default' |
Also accepts useRender.ComponentProps<'span'>.
Accessibility
- Renders a span by default; pass render to use a link or other element.
- Badges are labels, not controls. Pair color variants with clear text.