第三章：基础组件

3.3 徽章组件

概述

徽章（Badge）是Shadcn提供的一个小型视觉元素，用于显示状态标记、计数或分类标签。它通常以紧凑的圆形或胶囊形状呈现，适合在按钮、导航项或表格单元格中使用。

基本用法

import { Badge } from "@/components/ui/badge"

function NotificationIndicator() {
  return <Badge variant="secondary">3 New</Badge>
}

核心属性

属性类型默认值说明
variant"default" | "secondary" | "destructive" | "outline""default"定义徽章的视觉变体
size"sm" | "md" | "lg""md"控制徽章尺寸
classNamestring-自定义CSS类名

变体示例

Shadcn提供了多种预设样式变体：

<div className="flex gap-2">
  <Badge variant="default">Default</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="destructive">Error</Badge>
  <Badge variant="outline">Outline</Badge>
</div>

自定义样式

通过Tailwind CSS类名可以完全自定义徽章外观：

<Badge 
  className="bg-gradient-to-r from-pink-500 to-purple-500 text-white shadow-lg"
>
  Premium
</Badge>

组合使用案例

徽章常与其他组件组合使用：

import { Button } from "@/components/ui/button"

function CartButton() {
  return (
    <Button variant="outline">
      Shopping Cart
      <Badge className="ml-2">5</Badge>
    </Button>
  )
}

最佳实践

  1. 语义化使用：用不同变体表示不同含义（如红色表示错误）
  2. 适度原则：避免在同一视图中使用过多徽章
  3. 响应式设计：在小屏幕上考虑隐藏或简化徽章内容
  4. 可访问性：确保徽章有足够的颜色对比度

常见问题

Q：如何实现动态更新的徽章？ A：将徽章内容与状态绑定：

const [count, setCount] = useState(0)

// 更新逻辑...
return <Badge>{count}</Badge>

Q：徽章可以包含图标吗？ A：可以配合使用Lucide-react等图标库：

import { AlertCircle } from "lucide-react"

<Badge>
  <AlertCircle className="mr-1 h-3 w-3" />
  Warning
</Badge>

进阶技巧

  • 使用CSS动画实现徽章脉冲效果
  • 结合Tooltip组件实现悬停提示
  • 通过@layer指令扩展默认主题样式

下一节：3.4 导航菜单组件

Last Updated::