Design System
Badge
Badges are small status indicators used to display labels, counts, or categories. They provide quick visual context.
Variants
Badges support multiple variants to indicate different types of information.
Default
Default
Secondary
Secondary
Outline
Outline
Destructive
Destructive
Usage Examples
Badges are commonly used to display status, counts, or categories.
With Count
Notifications
3
Status Badge
New
Error Badge
Error
Usage
import { Badge } from "@/components/ui/badge";
export function MyComponent() {
return (
<div className="flex items-center gap-2">
<span>Notifications</span>
<Badge>3</Badge>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "outline" | "destructive" | "default" | Badge style variant |
Material 3 Features
- Container Colors: Uses Material 3 container color tokens
- On Container Colors: Proper contrast using on-container tokens
- Shape: Full border radius for pill-shaped badges
- Theme Support: Automatically adapts to light and dark themes