---
title: 标签
slug: 标签
category: 组件
figma_node_id: 1:27
figma_page_name: ＞标签
aliases: [Tag, Label, 徽标, 状态标签]
last_extracted: 2026-05-19
status: ok
---

# 标签

> 用于表达内容属性、状态、分类或优先级的小尺寸标识。具备桌面端与移动端两套规格，按号型分小（16px）/中（18px）/大三档，按语义分警示、提示、积极、中性、消极五色，并支持优先级（低优/高优）、AI 渐变等专用样式。

## 类型与号型

如流的标签按尺寸、形态、语义三个维度组合：

| 号型 | 高度 | 主要应用场景 |
|---|---|---|
| 小号 | 16px | 工作流待办标签、AIO 标签 |
| 中号 | 18px | 工作卡 |
| 大号 | 自定义 | 单独使用的流式引擎表格标签系统 |

形态扩展：

- 基础标签：纯文字 / 文字 + 图标
- 优先级标签：低优 / 高优
- 时间提示标签：如 `lab/日程/5分钟后开始`
- 任务结论标签
- AI 渐变标签：含 BEP/智能体专用渐变背景

## 尺寸规格

- **小号标签**：高度 16px，常见宽度 28–48px（视文字长度自适应）
- **中号标签**：高度 18px，常见宽度 44px
- **AI 渐变小标签**（`Frame 48279` 等）：padding `3px 4px`，圆角 2px，行内 `gap: 10px`
- **AI 渐变标签变体**：padding `1px 6px`，圆角 2px

## 状态

- 默认态（default）
- 强调态（语义色实色背景）
- 弱化态（语义色 10% 透明度填充 + 同色文字）
- 选中态 / 未选中态（用于筛选场景，详见 [浮层](浮层.md)）

## 颜色与 token

### 语义色

| 语义 | 色值 | 用途 |
|---|---|---|
| 警示、强调 | `#FF5040` | 警示提示、强调高优内容 |
| 提示、突出 | `#FF7733` | 一般提示、需突出但不警示 |
| 积极、成功 | `#0BD9A5` | 完成、成功类反馈 |
| 清爽、中性 | `#3377FF` | 链接、信息类标签 |
| 消极、结束 | `#878D99` | 已结束、灰态、消极结论 |

每种语义色都提供两种填充：
- **实色背景**（标题区 4px 上圆角）— `borderRadius: 4px 4px 0 0`
- **10% 透明度背景**（下半区 4px 下圆角，文字仍用对应语义主色）

### 文字色

| token | hex | 用途 |
|---|---|---|
| `主文字` | `#17181A` | 大号标签的正文文字 |
| `辅文字` | `#11141A` | 标题级文字 |
| `中性 #878D99` | `#878D99` | 中性/消极标签文字色 |

### AI 渐变标签

- 边框渐变 / 背景渐变：`linear-gradient(68deg, #3377FF 0%, #8C66FF 100%)`
- 弱化背景：`linear-gradient(-64deg, rgba(51,119,255,0) 0%, rgba(51,119,255,0.06) 100%)`

## 间距与排布

- AI 渐变标签内部 padding：`3px 4px` 或 `1px 6px`，元素间 `gap: 10px`
- 文字采用 PingFang SC，字号 12px，行高 12px
- 桌面端画板宽度 1280×1839，移动端 1280×1840
- 标签水平排布间距以语义分组：5 种语义色每色块横向间隔 180px（在示例画板上）

## 文案规则

- 文字优先单行不换行，超出截断（…）
- 状态/分类标签使用 2–4 字（如"已结束"、"高优"）
- 时间类标签使用具象表述（如"5分钟后开始"）
- 避免连续叠加多个色彩相同但语义不同的标签

## 交互行为

- 多数标签为静态展示，不可点击
- 筛选场景中的标签具备选中/未选中切换能力
- 长按可弹出更多操作（详见 [长按气泡](长按气泡.md)）
- AI 渐变标签可承担入口角色，点击进入对应 AI 能力

## 示例

![桌面端标签全集](../图片/组件/标签/desktoptagoverview.png)
![移动端标签全集](../图片/组件/标签/mobiletagoverview.png)
![标签五色语义示意](../图片/组件/标签/wu-se-yu-yi.png)
![AI 渐变标签](../图片/组件/标签/AIgradienttag.png)
![优先级-低优](../图片/组件/标签/you-xian-ji-di-you.png)
![优先级-高优](../图片/组件/标签/you-xian-ji-gao-you.png)
![日程时间标签](../图片/组件/标签/ri-chengtimetag.png)
![任务结论标签](../图片/组件/标签/taskjie-luntag.png)

## 设计考量

- 五色语义体系直接复用 [2023设计语言规范](../基础/2023设计语言规范.md) 的功能色映射：警示用红，提示用橙，积极用绿，中性用蓝，消极用灰
- 同一语义提供"实色"与"10% 透明度"两种填充，前者用于强势提示、后者用于弱化背景，给视觉减负空间
- 桌面/移动端共享同一套色板与号型，仅画布尺寸略有差异（移动端高 +1px）

## 不推荐用法

- 同行不要连续摆放 4 个以上同色标签
- 不要把警示色用在常态分类标签上，避免语义"通胀"
- 大号标签仅在流式引擎表格中单独使用，常规列表用小/中号
- 不要自定义语义色，超出 5 种语义请与品牌色 / 中性色组合表达

## 关联

- 色彩 token 见 [色彩](../基础/色彩.md)
- 长按交互见 [长按气泡](长按气泡.md)
- 红点 / 角标见 [飘新-气泡-红点](飘新-气泡-红点.md)
- 列表中标签的位置规则见 [列表](列表.md)
