Badges are small status descriptors for UI elements such as avatar-like icons. A badge consists of a small circle, typically containing a number, and appears in proximity to another object. It can be used to add information to any content or highlight the status of an object.
Inspired by Ant Design Badge
When to use it
- To indicate the status of an object: active, inactive, error, success, in process.
- To draw attention to unread notifications.
This is a complex component, which means it consists of more components:
|backgroundColor||Customize the badge color||-|
|backgroundColorHue||Customize brightness of color||-|
|color||Customize the badge dot color||string||-|
|count||Number to show in the badge counter||ReactNode|
|dot||Display a red dot instead of a counter||boolean|
|flag||Show the badge as a flag||boolean|
|offset||The offset of the badge dot in [x, y] format||[number, number]||-|
|outlined||Add outline to the badge counter||boolean|
|overflowCount||Maximum number to show in the counter||number||99|
|pulsing||Enable pulsing animation||boolean|
|showZero||Show the badge when the counter is zero||boolean|
|status||Set badge as a status dot||''|
|textColor||Customize text color in badge||-|
|textColorHue||Customize brightness of color||-|
|title||Text shown when a cursor is hovered over the badge||string||count|