Badge
Highlights brief status, category, or count information. Commonly used to indicate updates, notifications, or labels.
Default
Code
Installation
npx shadcn@latest add badgeBasic Example
import { Badge } from "@/components/ui/badge"
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>With Icons
import { Badge } from "@/components/ui/badge"
import { IconStarFilled } from "@tabler/icons-react"
<Badge>
<IconStarFilled className="w-3 h-3" />
Featured
</Badge>Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | string | "default" | Visual style variant. Options: default, secondary, destructive, success, outline |
| ...props | HTMLAttributes | — | All standard HTML attributes |
All Variants
Default
Secondary
Destructive
Success
Outline
With Icons
Featured
Approved
Usage Guidelines
When to Use
Use badges to display status, labels, counts, or small pieces of metadata. They work well for tags, notifications, status indicators, and category labels.
Badges are most effective when used sparingly and for short text. Avoid using them for important information that needs more visibility.
Best Practices
- Keep badge text short and concise
- Use variant colors to indicate meaning (success for positive, destructive for errors)
- Pair badges with icons when appropriate for better visual communication
- Ensure sufficient contrast for accessibility
- Use outline variant for less prominent information
Accessibility
Badges should include meaningful text content. Don't rely solely on color to convey information. Ensure text is readable and has sufficient contrast against the background.
When badges represent status or state, consider adding aria-label attributes to provide additional context for screen readers.