§01-27Data Visualization

状態 badge

処理の状態を色付きのラベルで示す。

一覧の各行の状態を一瞥で区別できる。ジョブやデプロイなど、多数の項目から失敗や実行中を素早く見つけたいときに使う。

実装のポイント

状態は色・アイコン・テキストの 3 つで冗長に表現し、色覚に依存しない。実行中アイコンの回転は motion-safe: で reduced-motion 時に止める。