mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-01 14:59:35 +08:00
Code Issues Actions 34 Packages Projects Releases Wiki Activity
81556c75d5
ant-design/components/badge/index.en-US.md
黑雨 cef58664e8
📝doc: add design token table (#41717) 
* ✨feat: add token

* 📝doc: update lint

* 📝doc: update doc
2023-04-11 10:25:24 +08:00

2.5 KiB
Raw Blame History

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
cols
2
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 -

Design Token