Tag
tag给内容打上语义状态标签，可带图标和关闭按钮
用法
语气色
tone 覆盖状态光谱：neutral / brand / success / warning / danger。
默认处理中成功警告错误
tsx
<>
<Tag>默认</Tag>
<Tag tone="brand">处理中</Tag>
<Tag tone="success">成功</Tag>
<Tag tone="warning">警告</Tag>
<Tag tone="danger">错误</Tag>
</>变体
variant 提供 soft（默认浅底）/ solid 实底 / outline 描边。
softsolidoutline
tsx
<>
<Tag variant="soft" tone="brand">soft</Tag>
<Tag variant="solid" tone="brand">solid</Tag>
<Tag variant="outline" tone="brand">outline</Tag>
</>状态圆点
dot 前导状态点；pulse 让点呼吸闪烁，表达进行态。
运行中部署中重试中
tsx
<>
<Tag dot tone="success">运行中</Tag>
<Tag dot pulse tone="brand">部署中</Tag>
<Tag dot pulse tone="warning">重试中</Tag>
</>带图标
icon 槽放前导图标（存在时不渲染 dot）。
已通过已驳回
tsx
<>
<Tag tone="success" icon={<CircleCheck />}>已通过</Tag>
<Tag tone="danger" icon={<CircleX />}>已驳回</Tag>
</>可关闭
传 onClose 渲染关闭按钮，点击触发回调由调用方移除标签。
可移除
tsx
<Tag tone="brand" onClose={() => remove(tag)}>
可移除
</Tag>何时用
表达对象状态/类别的小标记（运行中、待审核、已驳回等），支持状态圆点与呼吸动画表达进行态。展示数值/计数徽记用 [[Badge]]；可输入/可移除的过滤令牌用 Chip，本组件偏只读状态标记。
导入
ts
import { Tag, tagVariants } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| variant | "soft" | "solid" | "outline" | "soft" | 视觉变体：soft 浅底（最常用于状态标签）/ solid 实底 / outline 描边。三档各自的底与文字色见「三档配色」 |
| tone | "neutral" | "brand" | "info" | "success" | "warning" | "danger" | "neutral" | 语气色。取值集与 Alert 一致。 |
| size | "sm" | "md" | "md" | 尺寸。 |
| dot | boolean | false | 前导状态圆点（颜色随 tone）。与 icon 互斥：icon 优先于 dot。 |
| pulse | boolean | false | 圆点呼吸动画（进行态语义）。仅在 dot 为真时生效。 |
| isDisabled | boolean | false | 禁用：降透明度、屏蔽指针事件、关闭按钮不可点。 |
| className | string | - | - |
| …HTMLAttributes | HTMLAttributes<HTMLSpanElement> | - | 透传 span 原生属性。状态标签常用 title 挂完整值做 hover 全文（表格里显示「Word」、title 是完整 MIME），以及 data-testid / aria-* |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onClose | () => void | 提供则渲染关闭(×)按钮，点击触发该回调。 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| icon | ReactNode | 前导图标槽；存在时不渲染 dot。 |
| children | ReactNode | 标签文本。 |
三档配色
自己拼一块带语义色的高亮区（不是 Tag、不是 Alert）时照这张表配 —— 它就是本组件内部那份配方：
| 档 | 底 | 文字 |
|---|---|---|
| solid | bg-warning | text-warning-foreground |
| soft | bg-warning-subtle（或 bg-warning/12） | text-warning |
| outline | border-warning | text-warning |
`-foreground` 只配实心底：亮色下它就是白。浅底上按命名直觉写 text-warning-foreground 得到的是白字白底、文字整个看不见，而暗色下反而是对的（那边 -foreground 是近黑），谁在暗色主题里开发谁查不出来。浅底的文字色一律用语义色本身。
禁忌 / 坑
- `brand` 与 `info` 不是同一件事（#232）。
brand是主色，意思是「这条和产品/主操作有关」；info走独立的 info 色，意思是「这是中性事实说明，读一下就好」。表达「当前处于什么模式」这类既不成功也不警告的事实，用info——用brand会让一个不可点的标签在页面里与主 CTA 抢注意力，用neutral则会和一堆灰标签糊在一起读不出来。两者在 tokens 0.8.0 补齐--color-info前确实是一个颜色（见 Alert 的同一段历史），现在不是了。 pulse只在dot为真时生效，单独传pulse无动画。icon与dot互斥，同传时只渲染icon——想要圆点就别传 icon。onClose列表场景需自行维护移除后的状态（受控数组 filter），组件本身不删元素。- 关闭按钮的无障碍标签跟随
ConfigProvider：zhCN为“移除”，enUS为 “Remove”。旧自定义 locale 缺少components.tag时回退中文。
相关
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
状态标签
<Tag dot>状态标签</Tag>