バッジBadgeExperimental
バッジ、またはバッジ風のコンポーネントを表示します。
プレビュー
状態とバリエーション
バッジは短い状態や分類を伝えるための表示です。色だけに頼らず、ラベルで意味が伝わるようにします。
default公開中
主要な状態や、最も伝えたい分類に使います。
secondary下書き
補助的な状態や、控えめに見せたい分類に使います。
outline審査中
背景を強く塗らず、境界だけで区切りたい時に使います。
destructive要対応
エラーや期限切れなど、注意が必要な状態に使います。
アイコン付き
状態の意味が重要な場合は、短いラベルにアイコンを添えて認識しやすくします。
確認済み
削除できるタグ
フィルター条件やタグ入力では、Badge と小さな Button を組み合わせて削除操作を表します。この例では最後の 1 件は残します。
react
design-system
docs
無効化
選択済みでも操作できない状態は、aria-disabled と薄い表示で伝えます。無効理由は周辺の説明やツールチップで補足します。
固定タグ
追加できるバッジ
フィルターやタグの追加トリガーは、点線のアウトラインと + アイコンで未追加の操作だと分かるようにします。
選べるバッジ
右側のシェブロンで選択肢を開く場合は、Badge そのものではなく Badge 形状の Button として扱います。候補の表示は DropdownMenu や FilterButton の責務です。
複数の状態ラベル
課題管理や一覧では、状態、種別、優先度をまとめて小さく表示できます。
新規
進行中
不具合
P2
入力して追加する場合
Badge は追加済みの状態や分類を表示する部品です。自由入力でタグを追加する場合は TagInput を使い、候補から選ぶ場合は FilterButton や Combobox と組み合わせます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| variant | "default" | "secondary" | "destructive" | "outline" | "default" | バッジの視覚的な種類を指定します。 |
| children | ReactNode | - | バッジ内に表示する短いラベルです。 |
使い方
Loading...