徽章

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

export function BadgeDemo() {

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add badge
Copy

用法

🌐 Usage

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

Copy<Badge variant="default | outline | secondary | destructive">Badge</Badge>

示例

🌐 Examples

变体

🌐 Variants

使用 variant 属性来更改徽章的变体。

🌐 Use the variant prop to change the variant of the badge.

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

export function BadgeVariants() {

带有图标

🌐 With Icon

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

🌐 You can render an icon inside the 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.

import { Badge } from "@/components/ui/badge"
import { BadgeCheck, BookmarkIcon } from "lucide-react"

带旋转器

🌐 With Spinner

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

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

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

链接

🌐 Link

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

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

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

自定义颜色

🌐 Custom Colors

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

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

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

export function BadgeCustomColors() {

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

徽章

🌐 Badge

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

🌐 The Badge component displays a badge or a component that looks like a badge.