mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 11:40:04 +08:00
2.5 KiB
2.5 KiB
| category | title | cover | coverDark | demo | group | ||
|---|---|---|---|---|---|---|---|
| Components | Badge | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e0qITYqF394AAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*v8EQT7KoGbcAAAAAAAAAAAAADrJ8AQ/original |
|
Data Display |
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
Standalone
Overflow Count
Red badge
Dynamic
Clickable
Offset
Size
Status
Colorful Badge
Ribbon
Ribbon Debug
Mixed usage
Title
Colorful Badge support count Debug
API
Badge
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| color | Customize Badge dot color | string | - | |
| count | Number to show in badge | ReactNode | - | |
| 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 |
- | 4.6.0 |
| status | Set Badge as a status dot | success | processing | default | error | warning |
- | |
| 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 (4.5.0+)
| 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 | - |