Badge
Buttons
Animated badge with multiple variants (default, success, warning, error, info), three sizes, optional icon, removable with AnimatePresence, and framer-motion entrance animation.
Loading preview...
Customize
Variant:
Size:
Animated
Removable
Label
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Badge content. |
variant | 'default' | 'success' | 'warning' | 'error' | 'info' | 'default' | Color variant of the badge. |
size | 'sm' | 'md' | 'lg' | 'md' | Badge size. |
animated | boolean | true | Enable entrance/exit animation. |
removable | boolean | false | Show a remove (X) button. |
onRemove | () => void | undefined | Callback when remove button is clicked. |
icon | React.ReactNode | undefined | Optional icon displayed before the label. |
className | string | '' | Additional CSS classes. |