mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-15 08:59:15 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity
e906a805fb
ant-design/components/badge/index.en-US.md
二货爱吃白萝卜 20561d6f9d
docs: Fix component doc alignment & support import usage (#48004) 
* docs: init ref

* docs all support

* docs: fix link show
2024-03-22 14:22:42 +08:00

2.9 KiB
Raw Blame History

category title description cover coverDark demo group
Components Badge Small numerical value or status descriptor for UI elements. 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

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 -

Semantic DOM

Design Token