跳到主要内容
Termlib

UI 组件 · 数据展示

标签

Tag

也叫：Chip、Label、标记、胶囊标签、Badge（shadcn/ui 的叫法）

放在文字旁边的小块圆角标记，用几个字表示分类、状态或属性，例如「已发货」「前端」。

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

怎么跟 AI 说

改成你的业务内容再发

在订单表格的状态列用标签显示状态：「待付款」橙色、「已发货」蓝色、「已完成」绿色、「已取消」灰色，都是浅色底加同色系深色文字，高 22px、圆角 4px、字号 12px。筛选栏里已选的条件也显示成标签，右侧带一个小叉，点击后移除该条件。

发给

01判断

你的内容是这样吗？

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

符合这些情况，用标签

  • 在表格或列表中标注每条记录的状态，例如已付款、已取消
  • 给文章、商品、项目标注分类或属性，一条内容可以有多个标签时
  • 在筛选栏展示已选中的筛选条件，并允许用户逐个移除时
  • 在输入框里展示用户已输入的多个关键词或收件人时

是这些情况，换成别的

  • 提示图标上有几条未读消息时

    改用徽标

  • 页面的主要操作入口，应该用按钮，不要做成标签的样子

    改用按钮

  • 需要写一句完整说明的提示信息

    改用警告提示文字提示

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

02避坑

常见坏用法

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

  1. 01

    一条记录挂七八个颜色各异的标签，页面花成一片，重点反而看不出来

  2. 02

    把「提交」「删除」这类操作做成标签样式，用户看不出能点

  3. 03

    同一种状态在不同页面用了不同颜色，用户无法形成记忆

03识别

怎么认出它

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

结构

由带底色或边框的圆角容器和其中的简短文字组成，可带前置图标或右侧的关闭按钮。

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

识别特征

  1. 1文字旁边的小块圆角矩形，里面只有几个字
  2. 2有浅色底色或细边框，字号比正文小
  3. 3常成组出现在表格状态列、标题下方或筛选栏里，有时右侧带小叉

04解释

详细解释

标签是一个带底色或边框的小圆角块，里面是两三个字的简短文字，用来标注一条内容的分类、状态或属性。常见于表格的状态列（「已付款」「已取消」）、文章的主题标签、商品的「新品」「包邮」，以及筛选栏里已选中的条件。不同状态常用不同颜色区分，也可以带关闭按钮让用户移除。

标签和徽标的区别：标签独立排在文字旁边，说明「这是什么、处于什么状态」；徽标叠在图标或头像的角上，提醒「有几条新消息」。shadcn/ui 和 Bootstrap 的 Badge 组件，外观和用途大多其实是标签。

标签也要和按钮区分：标签默认只展示信息，不承担主要操作。可点击的标签（如筛选标签）要有悬停和选中状态，让用户知道能点。

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

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

  • .ant-tag
  • .el-tag
  • [class*="MuiChip-root"]
  • .arco-tag
  • .t-tag
  • .n-tag
  • [data-slot="badge"]
  • .badge:not(.position-absolute):not(.translate-middle)
  • span.rounded-full.text-xs:is(.px-2, .px-2\.5, .px-3):is([class*="bg-"], .ring-1, .border)
  • span.rounded-md.text-xs:is(.px-1\.5, .px-2, .px-2\.5):is([class*="bg-"], .ring-1, .border)
类名关键词

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

  • tag
  • chip
  • pill
  • badge
  • label-tag
  • status-badge
  • status-tag
  • status-pill
  • status-label
  • status-chip
  • tag-item
组件名

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

  • Tag
  • Chip
  • Pill
  • Badge
  • StatusBadge
  • StatusTag
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30