Badge
Badge
Importimport { Badge } from 'antd'; |
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 | Global Config |
|---|---|---|---|---|---|
| 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> | - | 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 | medium | 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> | - | 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. Set to null or false to remove the native tooltip | string | null | false | - | 6.5.0 | × |
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 6.0.0 | |
| 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> | - | 6.0.0 | |
| 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 |
| paddingInline | Inline padding of multiple words badge | string | number | 8 |
| 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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBorderBg | Control the color of background border of element. | string | #ffffff |
| colorError | Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc. | string | #ff4d4f |
| colorErrorHover | The hover state of the error color. | string | #ff7875 |
| colorInfo | Used to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens. | string | #1677ff |
| colorSuccess | Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens. | string | #52c41a |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextLightSolid | Control the highlight color of text with background color, such as the text in Primary Button components. | string | #fff |
| colorTextPlaceholder | Control the color of placeholder text. | string | rgba(0,0,0,0.25) |
| colorWarning | Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens. | string | #faad14 |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineWidth | Border width of base components | number | 1 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| motionEaseOutBack | Preset motion curve. | string |