Badge
A sliver of film glass for labels and counts; semantic variants are tinted glass, not paint.
Install
$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/badge.jsonExamples
Variants
NeutralAccentStableBetaDeprecatedOutline
"use client";
import { Badge } from "@/components/ui/badge";
export function BadgeDemo() {
return (
<div className="flex flex-wrap items-center justify-center gap-2.5">
<Badge>Neutral</Badge>
<Badge variant="accent">Accent</Badge>
<Badge variant="success">Stable</Badge>
<Badge variant="warning">Beta</Badge>
<Badge variant="destructive">Deprecated</Badge>
<Badge variant="outline">Outline</Badge>
</div>
);
}API
<Badge />
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "neutral" | "accent" | "success" | "warning" | "destructive" | "outline" | "neutral" | Visual treatment. |
| asChild | boolean | false | Render the child element with badge styling. |