Badge
Importimport{ Badge }from"antd"; |
Sourcecomponents/badge |
When To Use
Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
Examples
Simplest Usage. Badge will be hidden when count is 0, but we can use showZero to show it.
${overflowCount}+ is displayed when count is larger than overflowCount. The default value of overflowCount is 99.
The count will be animated as it changes.
Set offset of the badge dot, the format is [left, top], which represents the offset of the status dot from the left and top of the default position.
Standalone badge with status.
Use ribbon badge.
Used in standalone when children is empty.
This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.
The badge can be wrapped with a tag to make it linkable.
Set size of numeral Badge.
We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
API
Common props ref：Common props
Badge
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| color | Customize Badge dot color | string | - | |
| count | Number to show in badge | ReactNode | - | |
| classNames | Semantic DOM class | Record<SemanticDOM, string> | - | 5.7.0 |
| dot | Whether to display a red dot instead of count | boolean | false | |
| offset | Set offset of the badge dot | [number, number] | - | |
| overflowCount | Max count to show | number | 99 | |
| showZero | Whether to show badge when count is zero | boolean | false | |
| size | If count is set, size sets the size of badge | default | small | - | - |
| status | Set Badge as a status dot | success | processing | default | error | warning | - | |
| styles | Semantic DOM style | Record<SemanticDOM, CSSProperties> | - | 5.7.0 |
| text | If status is set, text sets the display text of the status dot | ReactNode | - | |
| title | Text to show when hovering over the badge | string | - |
Badge.Ribbon
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| color | Customize Ribbon color | string | - | |
| placement | The placement of the Ribbon, start and end follow text direction (RTL or LTR) | start | end | end | |
| text | Content inside the Ribbon | ReactNode | - |
Semantic DOM
root
5.7.0Root elementindicator
5.7.0Indicator element
Design Token
Component TokenHow to use?
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| dotSize | Size of dot badge | number | 6 |
| indicatorHeight | Height of badge | string | number | 20 |
| indicatorHeightSM | Height of small badge | string | number | 14 |
| indicatorZIndex | z-index of badge | string | number | auto |
| statusSize | Size of status badge | number | 6 |
| textFontSize | Font size of badge text | number | 12 |
| textFontSizeSM | Font size of small badge text | number | 12 |
| textFontWeight | Font weight of badge text | string | number | normal |