Badge
The Badge component displays a small status label. Supports six variants, two sizes, and an optional leading dot indicator.
Preview
Variants
DefaultPrimarySuccessWarningDangerInfo
Sizes
SmallMedium
With dot
Import
import { Badge } from '@chloe0592/pebble'Usage
<Badge>Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="danger" dot>Offline</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default' | Visual style |
size | 'sm' | 'md' | 'md' | Badge size |
dot | boolean | false | Shows a colored dot before the label |
All other props are forwarded to the underlying <span> element.