Badge
Small numerical value or status descriptor for UI elements.
When To Use#
Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
Examples#
Basic#
2
Standalone#
Notifications
2
Customized color#
16
99+
Overflow count#
99
99+
10+
999+
Dynamic count#
API#
| Property | Description | Type | Default |
|---|---|---|---|
count | Number to show in badge | number | |
overflowCount | Max count to show | number | 99 |
showZero | Whether to show badge when count is zero | boolean | false |
wrapperProps | Props of badge wrapper | BoxProps | |
color | Count color | string | |
bg | background color | string | |
borderColor | border color | string |