徽标数 Badge
一般出现在图标或文字的右上角。提供及时、重要的信息提示。
安装
npm install @arco-design/web-react@2.66.18
在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。
示例
- 基础用法：基础的用法。只需指定
count，即可显示徽标。 - 独立使用：
children为空时，将会独立展示徽标。 - 小红点：设置
dot，即可只显示小红点而不显示数字。count > 0时才显示。 - 文本内容：设置
text，可设置自定义提示内容。 - 最大值：设置
maxCount，可以限制最大显示的徽标数值，超过将会加+后缀。maxCount默认为99。 - 状态点：设置
status，可以得到不同的状态点。default - 默认processing - 进行中success - 成功warning - 提醒error - 错误。 - 颜色：我们提供多种预设色彩的徽标样式。如果预设值不能满足你的需求，
color字段也可以设置自定义色值。 - 动画效果：
count改变时候存在动画效果。
示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。
API
Badge
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| dot | 显示为小红点 | boolean | - |
| maxCount | 徽标最大显示数值，如果 count 超过这个数值会显示为 ${maxCount}+ | number | 99 |
| text | 自定义提示内容 | string | - |
| color | 内置的一些颜色 | | 'red'| 'orangered'| 'orange'| 'gold'| 'lime'| 'green'| 'cyan'| 'arcoblue'| 'purple'| 'pinkpurple'| 'magenta'| 'gray'| string | - |
| status | 徽标的状态类型 | 'default' | 'processing' | 'success' | 'warning' | 'error' | - |
| count | 徽标显示的数字 | number | ReactNode | 0 |
| className | 节点类名 | string | string[] | - |
| dotClassName | 徽标的类名 | string | string[] | - |
| dotStyle | 徽标的样式 | CSSProperties | - |
| offset | 设置徽标位置的偏移 | [number, number] | - |
| style | 节点样式 | CSSProperties | - |
常见问题
- 如何在
dot=true时设置不显示小红点？ 可以设置count=0。count > 0的时候才会展示徽标。