<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.
"danger" | "warning" | "info" | "success" | "primary" | "default"<Badge variant="default">Badge</Badge>Missing description.
Supports all span attributes.
| Prop | Type | Default | |
|---|---|---|---|
union | 'default' | ||
"sm" | "md" | "lg" | 'default' |
Last updated on 1/14/2026
Bringing singularity to the web.
Built with passion by @mehdibha.