React 组件

UGBadge 徽标

UGBadge 适合用于状态标记、分类标签和轻量提示信息。

导入方式

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

tsx

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

变体预览

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

默认次级成功警告危险描边

状态展示

配合图标可以更清晰地表达业务状态。

已同步待审核高风险

尺寸展示

UGBadge 没有内置尺寸枚举，通常通过 className 控制密度。

紧凑默认强调

代码示例

推荐在列表、表格或卡片头部中作为辅助信息。

tsx

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

export function StatusBadges() {
  return (
    <div className="flex gap-2">
      <UGBadge>默认</UGBadge>
      <UGBadge variant="success">已完成</UGBadge>
      <UGBadge variant="warning">待处理</UGBadge>
      <UGBadge variant="destructive">已拦截</UGBadge>
    </div>
  )
}

Props

属性	类型	默认值	说明
variant	'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'success' \| 'warning'	'default'	设置徽标的语义与颜色。
className	string	—	可用于调整图标间距、圆角或字号。