Badge
Badges are used to display status, notification counts, or contextual labels. Commonly used alongside icons or inside buttons to highlight updates or states
Loading Code Block...Installation
Section titled “Installation”To get started, install Butterfly DS via aqua:
Loading Code Block...Loading Code Block...sm
md
lg
xl
2xl
Loading Code Block...Variants
Section titled “Variants”success
dot
error
warning
5
counter
Loading Code Block...| Props | Default | Type | Description |
|---|---|---|---|
| type | dot | 'dot' | 'success' | 'error' | 'warning' | 'info' |'counter' |'verification' | The visual style variant of the badge |
| size | md | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | The size of the badge |
| bgColorClass | bg-red-500 | string | Custom background color class for the badge |
| value | - | number | The numeric value displayed on the counter badge |
| icon | - | ReactNode | Icon to display on the badge |
| ClassName | - | string | Custom class name for the badge |
| text | - | string | Text content of the badge |
| textColorClass | text-white text-xs | string | Custom text color class for the badge |