バッジBadgeBeta
バッジ、またはバッジ風のコンポーネントを表示します。
プレビュー
状態とバリエーション
バッジは短い状態や分類を伝えるための表示です。色だけに頼らず、ラベルで意味が伝わるようにします。
default公開中主要な状態や、最も伝えたい分類に使います。
secondary下書き補助的な状態や、控えめに見せたい分類に使います。
outline審査中背景を強く塗らず、境界だけで区切りたい時に使います。
destructive要対応エラーや期限切れなど、注意が必要な状態に使います。
アイコン付き
状態の意味が重要な場合は、短いラベルにアイコンを添えて認識しやすくします。
確認済み
削除できるタグ
フィルター条件やタグ入力では、Badge と小さな Button を組み合わせて削除操作を表します。この例では最後の 1 件は残します。
reactdesign-systemdocs
無効化
選択済みでも操作できない状態は、aria-disabled と薄い表示で伝えます。無効理由は周辺の説明やツールチップで補足します。
固定タグ
追加できるバッジ
フィルターやタグの追加トリガーは、点線のアウトラインと + アイコンで未追加の操作だと分かるようにします。
選べるバッジ
右側のシェブロンで選択肢を開く場合は、Badge そのものではなく Badge 形状の Button として扱います。候補の表示は DropdownMenu や FilterButton の責務です。
複数の状態ラベル
課題管理や一覧では、状態、種別、優先度をまとめて小さく表示できます。
新規進行中不具合P2
入力して追加する場合
Badge は追加済みの状態や分類を表示する部品です。自由入力でタグを追加する場合は TagInput を使い、候補から選ぶ場合は FilterButton や Combobox と組み合わせます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| variant | "default" | "secondary" | "destructive" | "outline" | "info" | "success" | "warning" | "default" | バッジの視覚的な種類を指定します。 |
| size | "sm" | "default" | "lg" | "default" | ピルのサイズ。default は従来どおり（h-5）。sm は密なステータスグリッド向け（icon と併用可）、lg は強調用。Tag のサイズ体系に揃えています。 |
| icon | ReactNode | - | 先頭に表示するアイコン（Tabler 等の svg）。サイズと余白は自動。色だけに頼らないステータスピルを1プロパティで作れます。装飾扱い（aria-hidden）で、意味はラベルが担います。 |
| children | ReactNode | - | バッジ内に表示する短いラベルです。 |
使い方
import { Badge } from "@gunjo/ui";
export function StatusBadges() {
return (
<div className="flex flex-wrap gap-2">
<Badge>公開中</Badge>
<Badge variant="secondary">下書き</Badge>
<Badge variant="outline">審査中</Badge>
<Badge variant="destructive">要対応</Badge>
</div>
);
}設計の判断
- 色だけに意味を乗せない。
iconの差し込み口があるのは、状態を表すバッジを色とアイコンと文字の3つで出せるようにするためです。アイコンはaria-hiddenの飾りで、意味は文字が持ちます。アイコンだけで使うときはaria-labelを渡します（#276）。 - 既定の要素は span。バッジは文の中に置ける部品なので、既定は
spanです。pの中にdivを入れると描画のときに壊れます。塊として置きたいときだけas="div"を渡します。 - 数の丸めは部品に持たせない。資料は「0件のときは出さない」「99件を超えたら99+にする」を挙げています。GUNJO の
Badgeはこの計算を持たず、呼ぶ側の判断に残しました。0を出すかどうかは画面の意味で変わるからです。大きさの刻み（sm・default・lg）はTagと同じ名前にしてあるので、並べて使うときに指定を読み替えずに済みます（#300）。
UIXHERO: バッジ（Badge）
使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。