ComponentsBadge
Badge
Display customizable badges for various purposes
Primary
Green
Red
Blue
Purple
Solid
Square
Border
Green
Hover
The Badge component creates a customizable badge that can be used to label, categorize, or highlight information.
Tip!
Use the color and style props to match the badge appearance to your application's design system.
Warning!
Ensure that the text content inside the badge is concise to prevent overflow issues, especially with smaller shapes like 'circle'.
Props
The Badge component accepts the following props:
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The content to be displayed inside the badge |
| className | string | '' | Additional CSS classes to be applied |
| shape | 'pill' | 'square' | 'circle' | 'pill' | The shape of the badge |
| border | boolean | false | Whether to display a border around the badge |
| style | 'soft' | 'solid' | 'soft' | The style of the badge (soft or solid background) |
| color | 'primary' | 'green' | 'red' | 'yellow' | 'orange' | 'blue' | 'purple' | 'gray' | 'primary' | The color scheme of the badge |
| hover | boolean | false | Whether to apply a hover effect |
| onClick | function | - | Function to be called when the badge is clicked |
Info
The makeClassNameImportant utility is used to ensure custom classes take precedence over default styles.
Usage Examples
Basic Badge
New
Customized Badge
Success
Badge with Hover Effect
Click me
Different Colors and Styles
Primary
Red
Yellow
Blue