Variants
DefaultSuccessWarningDestructiveOutline
Sizes
SmallMedium
Props
| Prop | Type | Description |
|---|---|---|
| variant | "default" | "success" | "warning" | "destructive" | "outline" | Color treatment |
| size | "sm" | "md" | Badge size |
| asChild | boolean | Render as child element via Radix Slot |
| className | string | Additional classes on the root element |
Usage
<Badge variant="success" size="sm">Active</Badge>
<Badge variant="destructive">Closed</Badge>
<Badge variant="outline">Draft</Badge>