Docs
徽章
徽章
显示徽章或看起来像徽章的组件。
Badge
安装
¥Installation
pnpm dlx shadcn@latest add badge
用法
¥Usage
import { Badge } from "@/components/ui/badge"<Badge variant="outline">Badge</Badge>链接
¥Link
你可以使用 badgeVariants 助手创建一个看起来像徽章的链接。
¥You can use the badgeVariants helper to create a link that looks like a badge.
import { badgeVariants } from "@/components/ui/badge"<Link className={badgeVariants({ variant: "outline" })}>Badge</Link>示例
¥Examples
默认
¥Default
Badge
辅助
¥Secondary
Secondary
大纲
¥Outline
Outline
破坏性
¥Destructive
Destructive