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

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

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

示例

灰度线框示意，只表达结构，不代表具体视觉风格。

怎么跟 AI 说

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

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

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

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