Docs
バッジ

バッジ

バッジまたはバッジのように見えるコンポーネントを表示する。

Badge

インストール

npx shadcn-ui@latest add badge

使用

import { Badge } from "@/components/ui/badge"
<Badge variant="outline">バッジ</Badge>

リンク

badgeVariants ヘルパーを使用して、バッジのように見えるリンクを作成できます。

import { badgeVariants } from "@/components/ui/badge"
<Link className={badgeVariants({ variant: "outline" })}>バッジ</Link>

例

デフォルト

Badge

セカンダリ

Secondary

アウトライン

Outline

デストラクティブ

Destructive