125k

Badge

PreviousNext

バッジまたはバッジに似たコンポーネントを表示します。

BaseRadixReact Aria
バッジセカンダリデストラクティブアウトライン
import { Badge } from "@/components/ui/base/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/base/badge"

export function BadgeVariants() {

アイコン付き

バッジ内にアイコンをレンダリングできます。左側のアイコンをレンダリングするには data-icon="inline-start" を使用し、右側のアイコンをレンダリングするには data-icon="inline-end" を使用します。

認証済みブックマーク
import { BadgeCheck, BookmarkIcon } from "lucide-react"

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

スピナー付き

バッジ内にスピナーをレンダリングできます。 data-icon="inline-start" または data-icon="inline-end" プロップをスピナーに忘れずに追加してください。

削除中生成中
import { Badge } from "@/components/ui/base/badge"
import { Spinner } from "@/components/ui/base/spinner"

リンク

リンクをバッジとしてレンダリングするには、render プロップを使用します。

import { ArrowUpRightIcon } from "lucide-react"

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

カスタムカラー

bg-green-50 dark:bg-green-800 などのカスタム クラスを Badge コンポーネントに追加することで、バッジの色をカスタマイズできます。

青緑空色紫赤
import { Badge } from "@/components/ui/base/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-