@ug666/react 文档演示

Tag 标签

可交互的内联标签组件，支持多种语义变体、可关闭操作与自定义颜色，区别于纯展示用途的 Badge。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Tag } from '@ug666/react'

6 种 variant 预览

覆盖默认、主要、成功、警告、危险与描边六种语义。

默认主要成功警告危险描边

可关闭标签

通过 useState 管理标签列表，点击 × 从列表中删除该标签。

设计系统前端工程Vue 3React 19TypeScriptTailwind

自定义颜色

通过 color prop 传入任意十六进制颜色值，覆盖默认 variant 样式。

紫色天蓝玫红翠绿琥珀

两种尺寸

sm 更紧凑，适合标签云；default 适合操作区域内联展示。

sm 尺寸default 尺寸

sm 可关闭default 可关闭

代码示例

推荐在筛选器、技能标签与搜索结果条件展示中使用可关闭标签。

import { useState } from 'react'
import { Tag } from '@ug666/react'

const INITIAL_TAGS = ['设计', '前端', 'Vue', 'React', 'TypeScript']

export function ClosableTags() {
  const [tags, setTags] = useState(INITIAL_TAGS)

  return (
    <div className="flex flex-wrap gap-2">
      {tags.map((tag) => (
        <Tag
          key={tag}
          variant="primary"
          closable
          onClose={() => setTags((prev) => prev.filter((t) => t !== tag))}
        >
          {tag}
        </Tag>
      ))}
    </div>
  )
}

Props 说明

属性	类型	默认值	说明
variant	'default' \| 'primary' \| 'success' \| 'warning' \| 'destructive' \| 'outline'	'default'	语义变体，控制背景色与文字颜色。
size	'sm' \| 'default'	'default'	标签尺寸。
closable	boolean	false	是否显示关闭按钮。
onClose	(event: MouseEvent) => void	—	点击关闭按钮时的回调。
color	string	—	自定义背景色，覆盖 variant 颜色。
disabled	boolean	false	禁用关闭交互并降低不透明度。