Small status / category label.
import { Badge } from "@cooud-ui/ui";
npx cooud-ui add badge
Generated from the component's exported types.
Extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants>
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "primary" | "secondary" | "outline" | "success" | "warning" | "destructive" | "error" | "info" | "default" | — |
Compact status and category labels across the semantic palette.
<div className="flex flex-wrap gap-2"><Badge variant="default">Default</Badge><Badge variant="primary">Primary</Badge><Badge variant="secondary">Secondary</Badge><Badge variant="outline">Outline</Badge><Badge variant="success">Success</Badge><Badge variant="warning">Warning</Badge><Badge variant="error">Error</Badge><Badge variant="info">Info</Badge></div>
Pair a leading icon with the label to reinforce meaning.
<Badge variant="success"><Check aria-hidden="true" />Verified</Badge>