111k
新建

Badge

PreviousNext

显示一个徽标，或一个看起来像徽标的组件。

Radix UIBase UI
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</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"

带加载指示器

你可以在徽标内部渲染 spinner。记得给 spinner 添加 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() {

RTL

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

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

import * as React from "react"

API 参考

Badge

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

PropTypeDefault
variant"default" | "secondary" | "destructive" | "outline" | "ghost" | "link""default"
classNamestring-