<Badge>Badge</Badge>npx shadcn@latest add @dotui/badgeUse badges to highlight status, categorize items, or show counts.
import { Badge } from "@/components/ui/badge";<Badge>Badge</Badge>Use the controls below to experiment with different badge props and see the live preview and code update.
The visual style of the badge.
"accent" | "danger" | "info" | "neutral" | "success" | "warning"The visual appearance of the badge.
"solid" | "subtle"<Badge>Badge</Badge>Missing description.
Supports all span attributes.
| Prop | Type | Default | |
|---|---|---|---|
"solid" | "subtle" | 'solid' | ||
union | 'neutral' | ||
"lg" | "md" | "sm" | 'md' |
Last updated on 5/22/2026