StatusLabel

オブジェクトの状態を短いラベルで伝えるためのコンポーネントです。Table内のステータス欄や、オブジェクト詳細の画面タイトルで状態を提示するときに使います。

重要度によって2種類の見た目を使い分けます。警告やエラーは特別な状態として見た目を持っています。

使用上の注意

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

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

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

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

種類

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

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

状態

強調の有無

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

使い方チェックリスト

StatusLabel

参照元：使用上の注意 > オブジェクト名自体をStatusLabelで表現しない 「使用上の注意 > オブジェクト名自体をStatusLabelで表現しない」の本文へ移動

• Avoid

  オブジェクト名そのものを StatusLabel で表現しない

参照元：使用上の注意 > StatusLabelをリンクやアクションボタンの代替にしない 「使用上の注意 > StatusLabelをリンクやアクションボタンの代替にしない」の本文へ移動

• Avoid

  StatusLabel 単体でリンクやアクションボタンの機能を持たせない

参照元：種類 「種類」の本文へ移動

• Must

  ステータスの種類に応じて色を使い分ける

  • 特殊なステータス（警告・エラー）を表す場合は、背景色に警告色やエラー色を使う
  • その他のステータスを表す場合は、プロダクトに応じて適宜色を選択する
• Must

  色のみでステータスを伝えず、適切な名前を付ける

参照元：状態 > 強調の有無 「状態 > 強調の有無」の本文へ移動

• Should

  他のステータスと区別して視覚的に目立たせたい場合は、背景色と文字色を反転させた「強調あり」のラベルを使う

Props