バッジBadgeExperimental
バッジ、またはバッジ風のコンポーネントを表示します。
プレビュー
状態とバリエーション
バッジは短い状態や分類を伝えるための表示です。色だけに頼らず、ラベルで意味が伝わるようにします。
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" | バッジの視覚的な種類を指定します。 |
| 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>
);
}