Importimport { Badge } from "antd"; |
Docs |
contributors
Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| color | Customize Badge dot color | string | - | |
| count | Number to show in badge | ReactNode | - | |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| 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 | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| 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 | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| color | Customize Ribbon color | string | - | |
| placement | The placement of the Ribbon, start and end follow text direction (RTL or LTR) | start | end | end | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| text | Content inside the Ribbon | ReactNode | - |
| 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 |