Tag
tag状态标签 · 5 语气状态色 + 状态圆点/呼吸进行态(pulse) + 图标 + 可关闭(企业状态标记·区别 Chip 令牌)
用法
语气色
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" | "success" | "warning" | "danger" | "neutral" | 语气色。 |
| size | "sm" | "md" | "md" | 尺寸。 |
| dot | boolean | false | 前导状态圆点（颜色随 tone）。与 icon 互斥：icon 优先于 dot。 |
| pulse | boolean | false | 圆点呼吸动画（进行态语义）。仅在 dot 为真时生效。 |
| isDisabled | boolean | false | 禁用：降透明度、屏蔽指针事件、关闭按钮不可点。 |
| className | string | — | — |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onClose | () => void | 提供则渲染关闭(×)按钮，点击触发该回调。 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| icon | ReactNode | 前导图标槽；存在时不渲染 dot。 |
| children | ReactNode | 标签文本。 |
禁忌 / 坑
pulse只在dot为真时生效，单独传pulse无动画。icon与dot互斥，同传时只渲染icon——想要圆点就别传 icon。onClose列表场景需自行维护移除后的状态（受控数组 filter），组件本身不删元素。
相关
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Badge
Playground
状态标签
<Tag dot>状态标签</Tag>