COMPONENT 46 · Feedback & Status
徽标
Badge
也叫Count BadgeStatus Badge徽章Notification Badge
附着于对象旁的短状态、计数或分类标记。
A compact status, count, or classification indicator attached to another object.
ANATOMY & USAGE
结构与使用建议
组成部分
- 紧凑容器
- 短文字或数字
- 关联对象
适合使用
- 需要快速扫描状态、数量或简短类别时。
不建议使用
- 内容可点击、可移除或需要承载长文本时。
键盘与无障碍
- 确保含义在可访问名称中，纯装饰红点不应成为唯一状态来源。
DESCRIBE IT TO AI
这样告诉编程助手
实现徽标（Badge）：附着于对象旁的短状态、计数或分类标记。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<div class="demo row">
<span>收件箱</span>
<span aria-label="3 条未读消息">3</span>
<span class="muted">进行中</span>
</div>