A small, styled label for highlighting status, categories, or counts.
A versatile badge component with multiple visual variants. Renders as a <span> by default but supports the render prop from Base UI for custom elements like links.
import { Badge } from "@/components/ui/badge"
export default function BadgeDemo() {
return <Badge>Badge</Badge>
}
import { Badge } from "@/components/ui/badge"<Badge>Label</Badge><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>Use the render prop to render the badge as an anchor or any other element.
<Badge render={<a href="/docs" />}>Documentation</Badge><div className="flex gap-2">
<Badge variant="ghost">Ghost</Badge>
<Badge variant="link">Link</Badge>
</div>Renders a small inline label. Uses Base UI's useRender hook so the underlying element can be swapped via the render prop.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "default" | The visual style of the badge. |
render | React.ReactElement | — | Custom element to render instead of a <span>. |
className | string | — | |
children | ReactNode | — |