Components
BadgeSecondaryDestructiveOutline
import { Badge } from "@/components/ui/badge"
export function BadgeDemo() {安装
pnpm dlx shadcn@latest add badge
用法
import { Badge } from "@/components/ui/badge"<Badge variant="default | outline | secondary | destructive">徽章</Badge>示例
变体
使用 variant 属性来改变徽章的变体。
DefaultSecondaryDestructiveOutlineGhost
import { Badge } from "@/components/ui/badge"
export function BadgeVariants() {带图标
你可以在徽章内渲染图标。使用 data-icon="inline-start" 在左侧渲染图标，使用 data-icon="inline-end" 在右侧渲染图标。
VerifiedBookmark
import { Badge } from "@/components/ui/badge"
import { BadgeCheck, BookmarkIcon } from "lucide-react"
带加载动画
你可以在徽章内渲染加载动画。记得给加载动画添加 data-icon="inline-start" 或 data-icon="inline-end" 属性。
DeletingGenerating
import { Badge } from "@/components/ui/badge"
import { Spinner } from "@/components/ui/spinner"
链接
使用 render 属性将链接渲染为徽章。
import { Badge } from "@/components/ui/badge"
import { ArrowUpRightIcon } from "lucide-react"
自定义颜色
你可以通过向 Badge 组件添加自定义类名（如 bg-green-50 dark:bg-green-800）来自定义徽章颜色。
BlueGreenSkyPurpleRed
import { Badge } from "@/components/ui/badge"
export function BadgeCustomColors() {API 参考
Badge
Badge 组件显示一个徽章或一个看起来像徽章的组件。
| 属性 | 类型 | 默认值 |
|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "default" |
className | string | - |