徽章

显示徽章或看起来像徽章的组件。

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"

使用 asChild 属性将链接渲染为徽章。

import { Badge } from "@/components/ui/badge"
import { ArrowUpRightIcon } from "lucide-react"

您可以通过添加自定义类（如 bg-green-50 dark:bg-green-800）到 Badge 组件来定制徽章的颜色。

BlueGreenSkyPurpleRed

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

export function BadgeCustomColors() {

Badge 组件用于显示徽章或看起来像徽章的组件。

属性	类型	默认值
`variant`	`"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"`	`"default"`
`className`	`string`	-