kaze風
StatusBadge
データ状態（live / stale / missing / manual / loading）を一目で示すバッジ。内部で Badge をラップし、適切な tone・ラベル・role=status を自動付与します。ダッシュボード系 UI で各指標の鮮度表示に最適。
プレビュー
自動更新要更新欠損手動取得中
リアルタイム5分前更新
使いどころ
使う場面
- 指標やデータ源の鮮度・取得状態を示す。status は live（自動更新）、stale（要更新）、missing（欠損）、manual（手動）、loading（取得中）の 5 つ
- ダッシュボードの各指標の横に置き、その数字を信じてよいかを一目で伝える
- 既定の文言で足りないときは label で差し替える。status の意味（色と live の挙動）は変わらない
使わない場面
- 5 つの状態に当てはまらない分類やラベル。Badge に tone を指定して使う
- 処理の成功・失敗の通知。Toast か Alert を使う
- tone を指定すること。status から自動で決まり、tone / children は受け取らない
使い方
<StatusBadge status="live" />
<StatusBadge status="stale" />
<StatusBadge status="missing" />
<StatusBadge status="live" label="リアルタイム" />プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
status必須 | "live" | "stale" | "missing" | "manual" | "loading" | なし | データの状態 |
label | string | なし | デフォルトラベルを上書きする表示テキスト |
dot | boolean | true | ドットインジケーターを表示するかどうか |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
アクセシビリティ
- 内部で Badge を使う。live と loading は role="status" が付き、取得状態の変化が読み上げられる。stale、missing、manual は読み上げない
- live を渡すと自動の判定を上書きできる。画面に同じバッジが大量に並ぶときは live={false} にして、読み上げの洪水を避ける
- dot は装飾。状態は文言と dot の色の両方で伝わる
文言
- 既定の文言（自動更新・要更新・欠損・手動・取得中）をそのまま使う。変えるなら、画面全体で統一する