Badge
Small labeling component for status, severity, and categorization.
Variants
DefaultSuccessWarningErrorInfo
import { Badge } from '@canarist/ui'
<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>Severity
HighMediumLow
<Badge variant="high">High</Badge>
<Badge variant="medium">Medium</Badge>
<Badge variant="low">Low</Badge>With dot
ActivePendingCritical
<Badge variant="success" dot>Active</Badge>
<Badge variant="warning" dot pulse>Pending</Badge>
<Badge variant="error" dot>Critical</Badge>Sizes
SmallMedium
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'success' | 'warning' | 'error' | 'info' | 'high' | 'medium' | 'low' | 'confirmed' | 'inferred' | 'default' | Visual style conveying semantic meaning. |
| size | 'sm' | 'md' | 'sm' | Size of the badge. |
| dot | boolean | — | Show a status dot before the label. |
| pulse | boolean | — | Animate the dot with a pulse. Requires dot=true. |
| className | string | — | Additional CSS classes. |
| children | ReactNode | — | Badge label content. |