Getting Started
Components
Text Animations
Backgrounds
BadgeSecondaryDestructiveOutline
Verified89920+
Installation
pnpm dlx shadcn@latest add @gammaui/badge
Usage
Default Badge
import { Badge } from "@/components/ui/badge"
export default function Example() {
return <Badge>Default Badge</Badge>
}Variants
<div className="flex gap-2">
<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
</div>As a Custom Slot
import Link from "next/link"
import { Badge } from "@/components/ui/badge"
;<Badge asChild>
<Link href="/dashboard">Dashboard</Link>
</Badge>Props
| Prop | Type | Default | Description | |||
|---|---|---|---|---|---|---|
| variant | `'default' | 'secondary' | 'destructive' | 'outline'` | 'default' | Sets the visual style of the badge |
| asChild | boolean | false | Allows rendering the badge as a custom wrapper | |||
| className | string | — | Additional Tailwind CSS classes | |||
| ...props | React.ComponentProps<'span'> | — | Native span props passed through |
Features
- Fully variant-driven with CVA
- Optional custom wrapper via Radix Slot (
asChild) - Built-in focus and hover states
- Supports dark mode
- Lightweight, reusable, and easy to extend
Example: Multiple Badges
<div className="flex gap-2">
<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
</div>