UG666

UG666 UI
@ug666/react 文档演示

Badge 徽标

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

导入方式

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

import { Badge } from '@ug666/react'

变体预览

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

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

状态展示

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

已同步 待审核 高风险

尺寸展示

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

紧凑默认强调

代码示例

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

import { Badge } from '@ug666/react'

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

Props 说明

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