109k
新建

徽章

上一个下一个

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

Radix UIBase UI
Radix UI - shadcn/ui 组件库
默认次要销毁轮廓
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 属性来更改徽章的变体。

默认次要销毁轮廓幽灵
import { Badge } from "@/components/ui/badge"

export function BadgeVariants() {

带图标

你可以在徽章内渲染图标。使用 data-icon="inline-start" 在左侧渲染图标，使用 data-icon="inline-end" 在右侧渲染图标。

已验证书签
import { Badge } from "@/components/ui/badge"
import { BadgeCheck, BookmarkIcon } from "lucide-react"

带有加载转轮

你可以在徽章内渲染一个加载转轮。记得为转轮添加 data-icon="inline-start" 或 data-icon="inline-end" 属性。

删除中生成中
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 组件中来定制徽章的颜色。

蓝色绿色天蓝色紫色红色
import { Badge } from "@/components/ui/badge"

export function BadgeCustomColors() {

RTL (从右至左)

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

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

import * as React from "react"

API 参考

徽章

Badge 组件显示一个徽章，或外观类似于徽章的组件。

属性类型默认
variant (变体)"default" | "secondary" | "destructive" | "outline" | "ghost" | "link""default"
classNamestring-