Tag
标记分类、属性或可移除条件。中文惯用名：标签。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.tag |
| 名称 | Tag |
| 二级分类 | 通用（general） |
| 用途 | 标记分类、属性或可移除条件 |
| 描述 | 中文惯用名：标签。 |
预览
静态结构：行内小标签 <span data-slot="tag">（inline-flex、rounded-md、text-xs），语义色经令牌类映射（success → border-success/50 bg-success/10 text-success，error 映射 destructive）；bordered=false 去描边；icon 渲染前缀图标（Icon 白名单）；closable 时尾部渲染关闭按钮（data-slot="tag-close"），点击触发 onClose 事件并在非受控场景隐藏自身。
DSL 结构
{
"type": "Tag",
"props": {
"text": "已发布",
"color": "success",
"closable": true
},
"events": {
"onClose": {
"action": "setState",
"params": {
"published": false
}
}
}
}何时用
何时使用
- 标记分类、属性或状态关键字：列表行的类型标记、筛选栏的已选条件、实体的属性标签。
- 可移除的筛选条件：closable 标签配合 events.onClose 同步删除对应条件。
- 需要语义色区分轻重：success / warning / error / info 四色表达状态强弱。
何时不用
- 表达运行 / 审核等带状态点的业务状态：使用 Status（状态点 + 文本）。
- 表示未读数量等计数提醒：使用 Badge。
- 可点击触发跳转或操作：使用 Button 或 Link，Tag 不是操作入口。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 默认 | muted 底色 + 边框 | 普通分类、属性标记 |
| 语义色 | success / warning / error / info 浅底深字 | 状态强弱、优先级区分 |
| 可关闭 | 尾部 × 按钮 | 筛选条件、可移除标记 |
| 带图标 | 前缀小图标 | 强化类型识别（如标签、旗帜） |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
text | string | — | 标签文本 |
color | `'default' | 'success' | 'warning' |
bordered | boolean | true | 是否描边（antd bordered） |
closable | boolean | false | 是否可关闭；点击触发 onClose 并隐藏自身 |
icon | string | — | 前缀图标名（Icon 白名单，kebab-case / PascalCase） |
onClose | event | — | 关闭事件（events.onClose 绑定动作） |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 文案保持 2~6 个字，标签是标记不是句子。
- 同一组标签语义色保持一致的含义（如 error 恒表示阻断性问题）。
- 可关闭标签的移除结果必须可预期：配合数据源同步删除条件，而非仅视觉消失。
- 一组标签用 Space（wrap）排列，避免手写 margin。
正例
- ✓ 筛选栏：已选条件渲染为 closable Tag，onClose 触发 setState 移除该条件并刷新列表。
- ✓ 表格行：状态列用 success/warning/error 语义色 Tag 区分「已发布 / 待审核 / 已驳回」。
反例
- ✕ 用 Tag 做页面主操作按钮（应使用 Button）。
- ✕ 在一个实体上堆叠超过 5 个标签（应收敛为关键属性 + 更多收起）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。