Badge 徽标
一般出现在图标或文字的右上角。提供及时、重要的信息提示。
构成
1
1: 背景容器
必有，用来承载内容的容器。
2:文字
可以是图标或字符，通常表示未读信息的数量或状态类型。
9
2
1
变体/类型
品牌色 Badge（状态类）
dot-blue
9
standard-blue
红色 Badge（警示类）
dot-red
9
standard-red
类型说明：
品牌色 Badge：传达状态、分类、标签等非紧急但有识别意义的信息。
界面中的状态标识（如“图标” “选择卡”）
红色 Badge：用于表示提醒、通知、未读、警告等紧急或需要用户立即关注的事项。
消息未读（消息中心）
系统提示（如设备故障、任务超期）
用户需要处理的待办事项
布局适配
小圆点徽标：没有数量标注，弱化视觉强度。用于提醒内容，功能，状态或动态更新，显示位置与主体物右上角中心点水平垂直居中。
Tab
数字徽标：有数量标注，强调数量的展示，根据场景最多设定 99+，显示位置与主体物右上角中心点水平垂直居中。
9
9
9
Tab
9
99+
99+
99+
Tab
99+
使用场景
9
标注
dot
standard
9
99+
6px
16px
16px
RTL
LTR
RTL
用法
99+
正确
123456788
错误
需要折行的文本内容，选择建议根据场景和信息类型定义最长字数，不宜出现过长的情况。框始终与文本顶部对齐。
9
2
99+
正确
9
2
99+
错误
需要折行的文本内容，选择建议根据场景和信息类型定义最长字数，不宜出现过长的情况。框始终与文本顶部对齐。
单选框
选择框
单选按钮
单选控件
选择按钮