Badge
Controls
variant
<Badge>Badge</Badge>Installation
npm
pnpm
yarn
bun
pnpm dlx shadcn@latest add @dotui/badgeUsage
Use badges to highlight status, categorize items, or show counts.
import { Badge } from "@/components/ui/badge"<Badge>Badge</Badge>Examples
Default
Badge
Pending
Pending
Link
Open Link
API Reference
A badge displays a short label or status that describes an item.
Supports all span attributes.
| Prop | Type | Default | |
|---|---|---|---|
union | 'solid' | ||
union | 'neutral' | ||
"lg" | "md" | "sm" | 'md' | ||
Last updated on 9/6/2026