徽章

显示徽章或外观类似徽章的组件。

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 { BadgeCheck, BookmarkIcon } from "lucide-react"

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

你可以在徽章内渲染加载指示器。请记得为加载指示器添加 data-icon="inline-start" 或 data-icon="inline-end" 属性。

DeletingGenerating

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

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

import { ArrowUpRightIcon } from "lucide-react"

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

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

BlueGreenSkyPurpleRed

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

export function BadgeCustomColors() {

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

شارةثانويمدمرمخططمتحققإشارة مرجعية

"use client"

import * as React from "react"

Badge 组件显示徽章或类似徽章的组件。

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