徽章 / Badge

示例代码

<Badge>默认</Badge>
<Badge variant="secondary">次要</Badge>
<Badge variant="outline">描边</Badge>
<Badge variant="destructive">警告</Badge>

示例代码

<Badge className="gap-2">
  <Check className="size-3" />
  已验证
</Badge>

示例代码

<span>状态：</span>
<Badge variant="secondary">测试版</Badge>
<Badge variant="outline">文档</Badge>

示例代码

<Badge asChild>
  <Link href="/dashboard/badge">文档</Link>
</Badge>

示例代码

<Button variant="outline" className="gap-2">
  <MessageSquareText className="size-4" />
  消息
  <Badge variant="secondary">12</Badge>
</Button>

示例代码

<Badge className="gap-2">
  <span className="size-1.5 rounded-full bg-primary" />
  在线
</Badge>

示例代码

<Badge variant="outline" className="gap-1">
  设计
  <button aria-label="移除 设计">
    <X className="size-3" />
  </button>
</Badge>

示例代码

<div className="relative">
  <Avatar className="size-12">...</Avatar>
  <Badge variant="destructive" className="absolute -right-2 -top-2 size-6 rounded-full p-0">
    3
  </Badge>
</div>

示例代码

<Badge asChild>
  <button type="button" aria-pressed="true">启用</button>
</Badge>