Loading...
Loading...
The Badge component displays small status indicators, tags, or labels. Perfect for categories, statuses, notifications, and metadata.
import { Badge } from '@/components/ui/badge';
// Basic badges
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>
// With icons
<Badge>
<Icon className="mr-1 h-3 w-3" />
Featured
</Badge>
// Custom colors
<Badge className="bg-oro-antico text-nero-tartufo">
Custom
</Badge>