标签 Tag

一个基于 React 和 class-variance-authority 构建的高度可配置标签组件，支持变体、图标等功能。

---

📦 引入方式

import { Tag } from '@itera-web/react-ui-tag';

---

🧩 使用示例

📚 基本使用

示例

默认标签

半透明标签

半透明标签

半透明标签

半透明标签

半透明加边框

半透明加边框

半透明加边框

半透明加边框

幽灵标签

边框标签

文本标签

链接标签

源码

  <Tag variant="default">默认标签</Tag>
  <Tag variant="translucent" opacity="thin" color="primary">
    半透明标签
  </Tag>
  <Tag variant="translucent" color="primary">
    半透明标签
  </Tag>
   <Tag variant="translucent" opacity="medium" color="primary">
    半透明标签
  </Tag>
  <Tag variant="translucent" opacity="heavy" color="primary">
    半透明标签
  </Tag>
  <Tag variant="translucent" opacity="thin" color="primary">
    半透明加边框
  </Tag>
  <Tag variant="translucent" color="primary">
    半透明加边框
  </Tag>
   <Tag variant="translucent" opacity="medium" color="primary">
    半透明加边框
  </Tag>
  <Tag variant="translucent" opacity="heavy" color="primary">
    半透明加边框
  </Tag>
  <Tag variant="ghost">幽灵标签</Tag>
  <Tag variant="outline">边框标签</Tag>
  <Tag variant="text">文本标签</Tag>
  <Tag variant="link">链接标签</Tag>

📚 设置圆角（round）

示例

默认

无圆角

100%

稍大圆角

源码

<Tag>默认</Tag>
<Tag round="zero">无圆角</Tag>
<Tag round="full">100%</Tag>
<Tag round="lg">稍大圆角</Tag>

📚 设置尺寸（size）

示例

小标签

默认标签

大标签

源码

<Tag size="sm">小标签</Tag>
<Tag size="default">默认标签</Tag>
<Tag size="lg">大标签</Tag>
<Tag size="icon" icon={<IconComponent />} />

📚 图标

示例

保存

信息或警告

成功

失败或错误

源码

<Tag icon={<CheckIcon />}>{'保存'}</Tag>
<Tag icon="info" color="warning" variant="translucent">
  {'信息或警告'}
</Tag>
<Tag icon="success" color="success" variant="translucent">
  {'成功'}
</Tag>
<Tag icon="error" color="error" variant="translucent">
  {'失败或错误'}
</Tag>

📚 自定义颜色（bgColor）

示例

主要文字1

主要文字2

危险文字1

危险文字2

成功文字

灰色文字

主要文字1

主要文字2

危险文字1

危险文字2

成功文字

灰色文字

源码

<Tag variant="text" color="primary">
  主要文字1
</Tag>
<Tag variant="text" color="purple">
  主要文字2
</Tag>
<Tag variant="text" color="danger">
  危险文字1
</Tag>
<Tag variant="text" color="error">
  危险文字2
</Tag>
<Tag variant="text" color="success">
  成功文字
</Tag>
<Tag variant="text" color="gray">
  灰色文字
</Tag>
<Tag color="primary">主要文字1</Tag>
<Tag color="purple">主要文字2</Tag>
<Tag color="danger">危险文字1</Tag>
<Tag color="error">危险文字2</Tag>
<Tag color="success">成功文字</Tag>
<Tag color="gray">灰色文字</Tag>

📚 与 asChild 搭配使用（继承其他元素）

示例

下载

源码

<Tag asChild>
  <a href="/download">下载</a>
</Tag>

---

🧩 Props

名称	类型	默认值	描述
variant	"default" | "text" | "link" | "solid" | "outline" | "ghost" | "translucent"	"default"	标签风格类型
size	"sm" | "default" | "lg" | "icon" | "zero"	"default"	标签尺寸
color	"default" | "success" | "primary" | "danger" | "warning" | "info" | "gray" | "error"	"default"	控制背景颜色
icon	React.ReactNode | "info" | "success" | "warning"	undefined	标签中的图标
round	"default" | "lg" | "zero" | "full"	default	圆角尺寸
asChild	boolean	false	是否作为子组件渲染（用于 Slot 包裹其他组件）
children	React.ReactNode	-	标签内容
...props	React.TagHTMLAttributes<HTMLTagElement>	-	原生 <button> 的所有属性支持

---

🎨 样式说明

• 使用 cva 定义了变体类名，支持多种样式组合。
• 图标（如 <Loader2 />）自动适应大小和位置。
• 默认带有响应式 hover 和 focus 样式。
• 支持 Tailwind 样式自定义扩展。