mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 15:19:58 +08:00
7104513a84
* docs: init * docs: semantic block * docs: part of demo * docs: modal * docs: slider * docs: space * docs: all sementic * docs: clean up * chore: fix lint * chore: clean up * chore: update script * test: fix test case * test: update testcase
2.9 KiB
2.9 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
Component Token
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 | - |