120k
New

徽章

PreviousNext

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

Base UIRadix UI
Radix 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>

Example

Variants

Use the variant prop to change the badge variant.

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

export function BadgeVariants() {

With Icon

You can render icons inside a badge. Use data-icon="inline-start" to render the icon on the left, and data-icon="inline-end" to render the icon on the right.

VerifiedBookmark
import { BadgeCheck, BookmarkIcon } from "lucide-react"

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

With Spinner

You can render a loading spinner inside a badge. Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the spinner.

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

Links

Use the asChild prop to render a link as a badge.

import { ArrowUpRightIcon } from "lucide-react"

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

Custom Colors

You can customize the badge colors by adding custom classes such as bg-green-50 dark:bg-green-800 to the Badge component.

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 组件用于显示徽章或看起来像徽章的组件。

属性类型默认值
variant"default" | "secondary" | "destructive" | "outline" | "ghost" | "link""default"
classNamestring-