kaze風
Badge
バッジ
プレビュー
デフォルト成功エラー警告情報
ドット付きオンライン
デフォルト成功エラー警告情報
使いどころ
使う場面
- 項目の状態や分類を、短い語で添える（「公開中」「下書き」「新着」）
- tone は意味で選ぶ。positive は成功・完了、negative は失敗・要対応、warning は注意、info は補足、default は中立
- 強調したいときだけ solid にする。同じ画面に solid が並ぶと、どれも目立たなくなる
使わない場面
- データの鮮度や取得状態（自動更新・要更新・欠損など）。StatusBadge を使う
- 押せるもの。Badge は操作できない。絞り込みなら FilterPill、操作なら Button を使う
- 色だけで意味を伝えること。tone を変えても必ずラベルの文字で意味が読めるようにする
使い方
<Badge tone="positive">成功</Badge>
<Badge tone="negative" solid>エラー</Badge>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
tone | "default" | "positive" | "negative" | "warning" | "info" | "default" | 意味色（旧 variant） |
dot | boolean | false | ドットインジケーターを表示するかどうか |
solid | boolean | false | 反転スタイル（塗り背景 + 白文字） |
live | boolean | なし | true のとき role="status" を付け、変化を読み上げる |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- 色は読み上げで伝わらない。「エラー」「警告」のように意味を文字にする
- dot は装飾（aria-hidden）。意味は dot ではなく文字で伝える
- 動的に変わる状態（処理中から完了へ）を知らせたいときだけ live を付ける。role="status" が付き、変化が読み上げられる。静的な表示に付けない
文言
- 1〜4 文字を目安に、名詞か体言止めで書く。文にしない
- 同じ状態には同じ語を使う。画面ごとに「完了」「終了」「済み」を混ぜない