Badge
A small label component to highlight status or categories.
Preview
DefaultSuccessWarningErrorInfo
Installation
bash
npx auralix-ui add badgeUsage
Default Badge
tsx
import { Badge } from "@/components/ui/Badge";
<Badge>Default</Badge>Badge Variants
tsx
<Badge variant="default">Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="info">Info</Badge>Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | "default" | "success" | "warning" | "error" | "info" | "default" | The color variant of the badge. |
size | "sm" | "md" | "md" | The size of the badge. |
children | ReactNode | - | The content of the badge. |
Variants
Solid (Default)
SolidBadge
Soft
SoftBadge
Outline
OutlineBadge
On this page