kasumi/uiBadge
ステータスやカテゴリを示すラベルコンポーネント。
Installation
npx shadcn@latest add https://kasumi-ui.vercel.app/r/badge.jsonUsage
バッジ
import { Badge } from "@/components/ui/badge";
<Badge>バッジ</Badge>Variant
DefaultOutline
<Badge variant="default">Default</Badge>
<Badge variant="outline">Outline</Badge>Size
SmallMedium
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>Custom Color
className で背景色やテキスト色を上書きできます。
情報成功警告エラー
<Badge className="bg-blue-500 text-white">情報</Badge>
<Badge className="bg-green-500 text-white">成功</Badge>
<Badge className="bg-yellow-500 text-white">警告</Badge>
<Badge className="bg-red-500 text-white">エラー</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "default" | バッジのスタイルバリエーション |
| size | "sm" | "md" | "md" | バッジのサイズ |