ant-design/components/badge/index.zh-CN.md

category	subtitle	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	数据展示

图标右上角的圆形徽标数字。

何时使用

一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。

代码演示

基本 独立使用 封顶数字 讨嫌的小红点 动态 可点击 自定义位置偏移 大小 状态点 多彩徽标 缎带 Ribbon Debug 各种混用的情况 自定义标题 多彩徽标支持 count 显示 Debug

API

Badge

参数	说明	类型	默认值	版本
color	自定义小圆点的颜色	string	-
count	展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时隐藏	ReactNode	-
classNames	语义化结构 class	Record<SemanticDOM, string>	-	5.7.0
dot	不展示数字，只有一个小红点	boolean	false
offset	设置状态点的位置偏移	[number, number]	-
overflowCount	展示封顶的数字值	number	99
showZero	当数值为 0 时，是否展示 Badge	boolean	false
size	在设置了 count 的前提下有效，设置小圆点的大小	default | small	-	4.6.0
status	设置 Badge 为状态点	success | processing | default | error | warning	-
styles	语义化结构 style	Record<SemanticDOM, CSSProperties>	-	5.7.0
text	在设置了 status 的前提下有效，设置状态点的文本	ReactNode	-
title	设置鼠标放在状态点上时显示的文字	string	-

Badge.Ribbon (4.5.0+)

参数	说明	类型	默认值	版本
color	自定义缎带的颜色	string	-
placement	缎带的位置，start 和 end 随文字方向（RTL 或 LTR）变动	start | end	end
text	缎带中填入的内容	ReactNode	-

styles 和 classNames 属性

名称	说明	版本
root	设置根元素	5.7.0
indicator	设置徽标元素	5.7.0

Design Token