Skip to main content

标签 Tag

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


📦 引入方式

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

🧩 使用示例

📚 基本使用

默认标签
半透明标签
半透明标签
半透明标签
半透明标签
半透明加边框
半透明加边框
半透明加边框
半透明加边框
幽灵标签
边框标签
文本标签
链接标签

📚 设置圆角(round)

默认
无圆角
100%
稍大圆角

📚 设置尺寸(size)

小标签
默认标签
大标签

📚 图标

保存
信息或警告
成功
失败或错误

📚 自定义颜色(bgColor)

主要文字1

主要文字2

危险文字1

危险文字2

成功文字

灰色文字

主要文字1
主要文字2
危险文字1
危险文字2
成功文字
灰色文字

📚 与 asChild 搭配使用(继承其他元素)


🧩 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"控制背景颜色
iconReact.ReactNode | "info" | "success" | "warning"undefined标签中的图标
round"default" | "lg" | "zero" | "full"default圆角尺寸
asChildbooleanfalse是否作为子组件渲染(用于 Slot 包裹其他组件)
childrenReact.ReactNode-标签内容
...propsReact.TagHTMLAttributes<HTMLTagElement>-原生 <button> 的所有属性支持

🎨 样式说明

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