Tag

Tag 是一个轻量标签组件，用于展示状态、分类、属性或短文本信息。组件渲染为 div，通过 color、variant、size 和 shape 控制视觉样式，图标、计数或关闭图标可以直接作为 children 组合。

import { Tag } from '@skyroc/web-ui';

何时使用

• 需要在列表、卡片、表格或详情中展示状态、分类、标签。
• 需要用颜色表达语义，例如成功、警告、错误或信息。
• 内容较短，通常是一两个词或小图标加文本。
• 需要可点击操作时优先使用 Button；需要表单选择时使用 Checkbox、Radio 或 Select。

基础用法

直接传入 children 即可。Tag 没有专门的关闭或图标 API，可以通过 children 组合图标和文本。

<Tag>Default</Tag>

<Tag color="success" variant="soft">
  <Check className="size-3" />
  Verified
</Tag>

颜色

通过 color 设置主题色。默认颜色为 primary。

变体

通过 variant 控制标签视觉强度。solid 强调最高，raw 最轻量。

尺寸

通过 size 调整标签高度、字号、水平间距和内容间距，从 xs 到 2xl 共 6 个尺寸。

形状

通过 shape 控制圆角。auto 使用固定圆角，rounded 使用胶囊圆角。

<Tag shape="auto">auto</Tag>
<Tag shape="rounded">rounded</Tag>

颜色和变体组合

颜色与变体可以自由组合，用于不同语义和视觉强度。

<Tag color="warning" variant="soft">
  Pending
</Tag>

<Tag color="destructive" variant="outline">
  Failed
</Tag>

API

Tag

Tag 继承 div 属性，并增加项目主题色、尺寸、形状和变体。

类型