Badge - Keep React
Table of Contents#
Default Badge#
The default badge is a versatile component that allows you to add visual indicators or labels to highlight specific information. It offers a simple yet effective way to enhance your design.
Sizes of Badge#
Choose from two available sizes for the Badge component: sm (small) and md (medium). This flexibility allows you to tailor the badge to your specific design needs.
Variant of Badge#
The Badge component offers three variants: variant="base", variant="border", and variant="background". These variants provide options for different visual styles, allowing you to choose the one that best suits your design and effectively highlights the badge content.
Badge With Dot#
Display a badge with a dot by setting the showIcon prop to true. Customize the position of the dot with the iconPosition prop, choosing between left and right.
API Reference#
Explore the available props for the Badge component
| Property | Description | Type | Default |
|---|---|---|---|
| color | Available Badge color. | primary secondary success warning error | primary |
| variant | Variant the badge | base border background | base |
| size | Size variant of the badge. | xs sm | sm |
| showIcon | Icon show in badge show or not? | boolean | false |
| iconPosition | Position of the icon inside the badge. | left right | right |
| className | Custom CSS class to be added to the badge. | string | None |
| dotStyle | Custom style to be added to the badge. | string | None |