Badge
A compact badge component with variants, sizes, and easy customization.
Default
Badge
Usage
Loading...
Variants
Use the variant prop to change the badge style.
BadgeSecondaryDestructiveOutline
Sizes
Use the size prop to adjust the badge size.
SmallDefaultLarge
Custom Styles
Use className to fully customize the badge.
Loading...
API Reference
The Badge component renders a span by default.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "default" | Visual style of the badge. |
size | "sm" | "md" | "lg" | "md" | Size of the badge. |
className | string | undefined | Add custom classes. |