Badge
Controls
variant
<Badge>Badge</Badge>Installation
npm
pnpm
yarn
bun
npx 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 | |
|---|---|---|---|
"solid" | "subtle" | 'solid' | ||
union | 'neutral' | ||
"lg" | "md" | "sm" | 'md' | ||
Last updated on 7/7/2026