React 组件

UGTag 标签

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGTag } from '@ug666/ui-react'

6 种 variant 预览

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

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

可关闭标签

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

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

自定义强调色

通过 color prop 传入 token CSS 变量，组件会生成兼顾文字对比度的柔和背景与边框。

主色成功警告危险信息

三种尺寸与长内容

sm、md、lg 对应紧凑、默认和强调密度；受限宽度下保持关闭操作可见并截断长文字。

sm 尺寸md 尺寸lg 尺寸

sm 可关闭md 可关闭

跨区域同步策略与成员权限筛选条件

代码示例

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

tsx

import { useState } from 'react'
import { UGTag } from '@ug666/ui-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) => (
        <UGTag
          key={tag}
          variant="primary"
          closable
          onClose={() => setTags((prev) => prev.filter((t) => t !== tag))}
        >
          {tag}
        </UGTag>
      ))}
    </div>
  )
}

属性

属性	类型	默认值	说明
variant	'default' \| 'primary' \| 'success' \| 'warning' \| 'destructive' \| 'outline'	'default'	语义变体，控制背景色与文字颜色。
size	'sm' \| 'md' \| 'lg' \| 'default'	'md'	标签尺寸；default 作为 md 的兼容别名保留。
closable	boolean	false	是否显示关闭按钮。
onClose	(event: MouseEvent) => void	—	点击关闭按钮时的回调。
color	string	—	自定义强调色；组件据此生成柔和背景与边框，建议传入 token CSS 变量。
disabled	boolean	false	禁用关闭交互并降低不透明度。