跳到主要内容
Termlib

UI 组件 · 数据展示

徽标

Badge

也叫：徽章、角标、小红点、计数标记

叠在图标、头像或按钮右上角的小红点或小数字，提醒用户这里有未读消息或新内容。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

在导航栏的铃铛图标右上角加一个红色数字徽标，显示未读消息数，超过 99 时显示「99+」，为 0 时整个徽标隐藏。徽标高 16px、白色数字、胶囊形，边缘压在图标右上角。侧边菜单里新上线的功能旁显示一个不带数字的小红点。

发给

01判断

你的内容是这样吗？

对照两列，确认徽标是不是你要找的。

符合这些情况，用徽标

  • 消息、通知、购物车等入口需要提示未读或待处理的数量时
  • 在头像右下角表示用户在线、忙碌等状态时
  • 在菜单项或功能入口旁提醒有更新，用户看过后即消失时

是这些情况，换成别的

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    把「已发货」「待审核」这类状态文字做成红色气泡叠在角上，其实应该用标签

  2. 02

    页面上几乎每个图标都挂着红点，用户分不清哪个真的重要

  3. 03

    未读数为 0 时仍然显示一个写着「0」的红色气泡

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由被包裹的目标元素（图标、头像、按钮）和叠在其右上角的小圆点或数字气泡组成。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1图标、头像或按钮右上角的一个小红点或红色数字气泡
  2. 2气泡很小，边缘压在所依附元素的角上
  3. 3数字较大时显示为「99+」

04解释

详细解释

徽标是贴在另一个元素右上角的小圆点或小数字，例如铃铛图标上的「3」、头像上的红点、菜单项旁的「New」。它本身不能点击，只负责提醒「这里有新东西、有几条」，用户处理之后就应该消失或数字减少。数字过大时通常显示成「99+」。

徽标和标签经常被混用，区别在于位置和含义：徽标附着在别的元素角上，内容是数量或有没有新内容；标签独立排在文字旁边，内容是分类、状态或属性，例如「已发货」「前端」。shadcn/ui 和 Bootstrap 里名为 Badge 的组件，很多时候其实是这里说的标签。

徽标多用红色来吸引注意，所以要克制使用，页面上到处都是红点，用户反而会视而不见。

开发者信息
术语 ID
component-badge
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-badge
  • .el-badge
  • [class*="MuiBadge-root"]
  • .arco-badge
  • .t-badge
  • .n-badge
  • .badge.position-absolute
  • .badge.translate-middle
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • badge-dot
  • count-badge
  • notification-badge
  • notification-dot
  • notification-count
  • unread-badge
  • unread-count
  • unread-dot
  • badge-count
  • nav-badge
  • menu-badge
  • nav-count
  • red-dot
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • CountBadge
  • NotificationBadge
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 浮在内容上
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30