徽标
Badge
别名:徽章小红点角标状态标签计数气泡数字角标图标右上角的小圆点
这是什么
附着在元素角落或行内的小型状态标记：圆点、数字计数或短文字标签。用于表达未读数量、 状态（新、已废弃）或分类；不参与交互，视觉上从属于宿主元素。
交互实验室
试一试，再决定怎么用比较状态标记与数字角标，注意它们和主内容的关系。
正在加载实验室…
使用时关注什么
- 01状态名称短而准确，不能只显示一个色点。
- 02较大计数应保持角标尺寸稳定。
✓ 适用场景
- 未读消息数、购物车数量
- 行内状态标注（成功、过期、Beta）
- 图标右上角的小红点提醒
✕ 不适用场景
- 需要点击响应（那是按钮或标签 chip）
- 数值超过上限要截断（99+）并避免频繁跳动
- 大段文字说明（改用 alert 或正文）
常见形式
计数
Count
数字气泡，可 99+ 截断
圆点
Dot
无文字纯提醒
标签
Label
有底色的短文字状态
实现要点
position: absoluteborder-radius: 9999pxbox-shadowfont-variant-numeric: tabular-nums宿主 relative，徽标 absolute 定位在 -top/-right 并加与底色一致的描边（ring 或 shadow） 避免融入背景图。数字用 tabular-nums 防宽度抖动，超过 99 显示 99+。 状态色语义固定：红 = 错误或紧急、绿 = 成功、灰 = 中性；颜色之外给 aria-label 说明含义。
平台 API
<span>