徽标Badge
你可能会说
消息图标右上角那个红色小数字，显示有几条没读。
徽标是附着在其他元素旁、补充数量或状态的简短标记消息图标右上角的“3”可提醒未读数量。不能只用红点或颜色表达重要状态，读屏用户也需要获得完整说明。
组成结构 · Anatomy
🔔5
整体，通常附着在相关元素上
被标记的图标、头像或文字
数字或红点，超 99 一般显示 99+
常见变体 · Variants
数字徽标Count
🔔5
有几条未读要交代清楚时
小红点Dot
⚙️
只说“有新内容”,不必报数时
状态点Status
林油
标记在线、离开这类实时状态
封顶数字Overflow
✉️99+
未读数量超过显示上限时，使用封顶数字
典型使用场景
未读消息提醒
BuildHub 图鉴
组件
教程
🔔5
✉️99+
在线状态
林小hu在线
油
阿油离开
构建机器人在线
菜单待办数
📦 我的订单3
🚚 待发货12
⭐ 我的收藏
购物车数量
好物商店
🛒3
无线耳机 Pro¥ 299
延伸阅读 · 权威出处