← Design system
Badge
Interactive examples and usage for the Badge component.
Examples
Default Primary Success Warning Danger Info Outline
With Dot
Active Offline
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'outline' | 'default' | Visual style variant |
size | 'sm' | 'md' | 'lg' | 'md' | Badge size |
dot | boolean | false | Show a status dot indicator |
onremove | () => void | undefined | Callback when remove button is clicked; shows remove button when set |