React 组件

UGBadge 徽标

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

导入方式

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

tsx

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

变体预览

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

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

状态点

既可作为文字前的辅助状态，也可独立展示并提供可访问名称。

在线同步中

状态展示

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

已同步待审核高风险

尺寸与长内容

使用 size 统一密度；容器受限时，长状态文字会保持单行并安全截断。

紧凑默认强调正在同步跨区域资源配置与权限状态

代码示例

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

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>
  )
}

属性

属性	类型	默认值	说明
variant	'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'success' \| 'warning'	'default'	设置徽标的语义与颜色。
size	'sm' \| 'md' \| 'lg'	'md'	设置徽标高度、水平内边距与字号。
icon	ReactNode	—	位于文字前方并与基线对齐的装饰图标。
dot	boolean	false	显示语义状态点；无文字时请补充 aria-label。
className	string	—	用于业务布局和最大宽度扩展，不建议重做基础密度。