←→ 切换·Esc 返回

徽标Badge

内容与数据展示
贴在图标或文字旁，补充数量、状态等小信息

徽标通常出现在图标、标签或头像旁，用数字、短文字或状态点提示未读消息等信息。它不能只依赖颜色表达，重要状态还要为读屏提供完整说明。

🔔5 ✉️99+ 林

什么时候用

  • 未读消息数：铃铛、私信入口
    🔔5✉12
  • 在线 / 离线状态小圆点
    林林小hu在线
    油阿油离开
  • 标签页、菜单上的待办条数
    全部待付款 3待发货 12
  • 头像右上角的新动态提示
    林3林小hu 有 3 条新动态

什么时候不用

  • 大数字指标（销售额、用户数）→ 用 统计数值 Statistic
    活跃用户12,846
    销售额¥ 86.4w
  • 拿红点当分类标签用，颜色语义全乱
    前端任务
    设计任务
    红点是“有未读”，不是分类色
  • 满屏都是红点，用户直接免疫
    🔔5✉9⚙2★7☰4
    全是红点，等于没有红点
  • 需要说清内容的提醒 → 用 通知 Notification
    审核未通过 查看原因 →
组成结构 · Anatomy
🔔5
1徽标Badge整体，永远挂在别的元素身上
2宿主元素Host被标记的图标、头像或文字
3角标Count数字或红点，超 99 一般显示 99+
常见变体 · Variants
数字徽标Count
🔔5
有几条未读要交代清楚时
小红点Dot
⚙️
只说“有新内容”,不必报数时
状态点Status
林油
标记在线、离开这类实时状态
封顶数字Overflow
✉️99+
未读量太大,超过 99 就显示 99+
典型使用场景
未读消息提醒
Vibe 图鉴 组件 教程 🔔5 ✉️99+
在线状态
林小hu在线
油 阿油离开
构建机器人在线
菜单待办数
📦 我的订单3
🚚 待发货12
⭐ 我的收藏
购物车数量
好物商店 🛒3
无线耳机 Pro¥ 299