StatusLabel

オブジェクトの状態を伝えるためのこのコンポーネントです。重要度によって2種類の見た目を使い分けます。警告やエラーは特別な状態として見た目を持っています。

使用上の注意

オブジェクト名自体をStatusLabelで表現しない

StatusLabelはオブジェクトの状態を伝えるために利用し、オブジェクト名そのものをStatusLabelで表現しないでください。

StatusLabelをリンクやアクションボタンの代替にしない

StatusLabel単体でリンクやアクションボタンの機能を持たないようにしてください。オブジェクト名とStatusLabelをまとめてリンクとする場合は許容します。

種類

特殊なステータスを表す場合は、背景色に警告色やエラー色を使います。
その他のステータスを表す場合は、プロダクトに応じて適宜色を選択します。

すべての人が同じように色を認識できるわけではありません。
色のみでステータスを伝えることは避け、ライティングを参考に適切な名前を付けましょう。 （参考：カラーユニバーサルデザイン）

状態

強調の有無

他のステータスと区別して、視覚的に目立たせたい場合は、背景色と文字色を反転させた「強調あり」のラベルを使います。
例えばユーザーがアクションをしないと次に進めない場合などに使います。

Props