Badge.tsx
基本信息
- 类型: React 组件 (shadcn/ui)
- 路径:
./src/components/ui/badge.tsx
功能描述
徽章/标签组件，用于显示状态、类别或计数。支持多种变体样式和插槽模式。
导出内容
Badge- 主徽章组件badgeVariants- 徽章样式变体配置
Props 接口
Badge
| 属性 | 类型 | 必填 | 默认值 | 说明 | |||
|---|---|---|---|---|---|---|---|
| variant | `'default' \ | 'secondary' \ | 'destructive' \ | 'outline'` | 否 | 'default' | 徽章变体样式 |
| asChild | boolean | 否 | false | 是否作为子元素渲染 | |||
| className | string | 否 | - | 自定义CSS类名 | |||
| ...props | React.ComponentProps<'span'> | 否 | - | span原生属性 |
变体说明
default- 主色背景（primary）secondary- 次要背景色destructive- 危险/警告红色背景outline- 透明背景带边框
依赖
@radix-ui/react-slot- 插槽组件class-variance-authority- 变体样式管理@/lib/utils- 工具函数 (cn)
使用示例
import { Badge } from "@/components/ui/badge";
// 默认样式
<Badge>新功能</Badge>
// 次要样式
<Badge variant="secondary">草稿</Badge>
// 破坏性样式
<Badge variant="destructive">错误</Badge>
// 轮廓样式
<Badge variant="outline">标签</Badge>
// 作为链接使用
<Badge asChild>
<a href="/category">分类</a>
</Badge>