Badge
Small status or count indicator component with variants and sizes.
Variants
DefaultPrimarySuccessWarningDanger
import { Badge } from 'uiplex';
<Badge variant="default">Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>Sizes
SmallMediumLarge
<Badge variant="primary" size="sm">Small</Badge>
<Badge variant="primary" size="md">Medium</Badge>
<Badge variant="primary" size="lg">Large</Badge>As Count
399+
<Badge variant="danger">3</Badge>
<Badge variant="primary">99+</Badge>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "primary" | "success" | "warning" | "danger" | "default" | Badge color variant |
| size | "sm" | "md" | "lg" | "md" | Badge size |
| children | React.ReactNode | - | Badge content (e.g. label or count) |
| className | string | "" | Additional CSS classes |
| style | React.CSSProperties | - | Inline styles |