Badge
A small label for status, counts and categories.
Badge
Installation
npx shadcn@latest add @blank/badgeUsage
import { Badge } from "@/components/ui/badge"<Badge variant="success">Active</Badge>Examples
Variants
One axis, not two. The first four names are shadcn's; the rest are the system's semantic colors, so a status badge reads the same here as it does on an alert or a progress bar.
DefaultSecondaryOutlineDestructiveSuccessWarningInfoBrand
Sizes
LargeDefaultSmallExtra small
Badge group
A pill that pairs a badge with a label. It is a container, not a configuration: put a Badge, some text and an icon inside it in the order you want them.
NewIntroducing the token pipeline
API Reference
Badge
Every span prop, plus:
| Prop | Type | Default |
|---|---|---|
variant | "default" | "secondary" | "outline" | "destructive" | "success" | "warning" | "info" | "brand" | "default" |
size | "xs" | "sm" | "default" | "lg" | "default" |
shape | "pill" | "rounded" | "pill" |
stroke | boolean | false |
asChild | boolean | false |
BadgeGroup
A span container with no props of its own.