Badge
Variants
DefaultNeutralSuccessWarningError
Sizes
SmallMediumLarge
With Icons
InfoNeutralSuccessWarningError
With Tooltip
DefaultSuccessWarningError
Badge
A small label component for displaying status, categories, or counts. Supports five semantic variants with light and dark mode.
Usage
import { Badge } from "@/components/ui/badge"
<Badge variant="default">Default</Badge>
<Badge variant="neutral">Neutral</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "neutral" | "success" | "error" | "warning" | "default" | Controls the color scheme of the badge. |
| size | "sm" | "md" | "lg" | "md" | Controls the size of the badge. |
| tooltip | boolean | false | When true, wraps the badge in a tooltip showing its content on hover. |
| className | string | — | Additional CSS classes. |
| children | React.ReactNode | — | Badge content. Can include text and/or icons. |