SmartHR Design System

StatusLabel

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

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

使用上の注意

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

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

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

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

1つのオブジェクトに複数のStatusLabelを設定しない

1つのオブジェクトに対して、複数のStatusLabelを設定しないでください。

StatusLabelは、オブジェクトのライフサイクルを表すステータス（例：開始前・進行中・完了）に主に使用します。ステータスをあらわすプロパティが複数ある場合は、値が1つに定まり、オブジェクトの絞り込みや並べ替えの基準になるものにStatusLabelを使用し、他のプロパティは文字列で表現します。文字列では区別しづらい場合はChipやIconの使用を検討してください。

Do
絞り込みや並べ替えの基準となる「対応状況」のステータスをStatusLabelで表現し、その他のステータスは文字列で表示する。
Don't
「対応状況」と「在籍状況」が同じ種類のStatusLabelで表現されており、基準となるステータスがわかりづらくなる。

インスタンスごとに異なる値をラベルに埋め込まない

StatusLabelのラベルには、インスタンスごとに異なる値を埋め込まないでください。同じ状態のオブジェクトを見分けづらくなります。

StatusLabelは、「開始前・進行中・完了」のように取りうるラベルの種類が決まっていて、同じ状態であれば同じラベルになるステータスに使用します。日数や件数などインスタンスごとに値が変わるものは文字列で表現してください。文字列では区別しづらい場合はChipなどの使用を検討してください。

Do
「提出状況」はラベルを揃え、インスタンスごとに異なる「残り日数」は別の列に文字列で表示する。
Don't
「提出状況」のラベルがインスタンスごとに異なるため、同じ状態のオブジェクトを見分けにくい。

種類

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

すべての人が同じように色を認識できるわけではありません。
色のみでステータスを伝えることは避け、ライティングを参考に適切な名前を付けましょう。 （参考：色や、形、音、レイアウト情報のみでコンテンツを説明していない）

状態

強調の有無

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

使い方チェックリスト

StatusLabel
参照元：使用上の注意 > オブジェクト名自体をStatusLabelで表現しない 「使用上の注意 > オブジェクト名自体をStatusLabelで表現しない」の本文へ移動
  • Avoid
    オブジェクト名そのものを StatusLabel で表現しない
参照元：使用上の注意 > StatusLabelをリンクやアクションボタンの代替にしない 「使用上の注意 > StatusLabelをリンクやアクションボタンの代替にしない」の本文へ移動
  • Avoid
    StatusLabel 単体でリンクやアクションボタンの機能を持たせない
参照元：使用上の注意 > 1つのオブジェクトに複数のStatusLabelを設定しない 「使用上の注意 > 1つのオブジェクトに複数のStatusLabelを設定しない」の本文へ移動
  • Avoid
    1つのオブジェクトに対して複数の StatusLabel を設定しない
    • StatusLabel は、オブジェクトのライフサイクルを表すステータス（例：開始前・進行中・完了）に主に使用する
    • ステータスをあらわすプロパティが複数ある場合は、値が1つに定まり、オブジェクトの絞り込みや並べ替えの基準になるものに StatusLabel を使用し、他のプロパティは文字列で表現する
    • 文字列では区別しづらい場合は Chip や Icon の使用を検討する
参照元：使用上の注意 > インスタンスごとに異なる値をラベルに埋め込まない 「使用上の注意 > インスタンスごとに異なる値をラベルに埋め込まない」の本文へ移動
  • Avoid
    StatusLabel のラベルにインスタンスごとに異なる値を埋め込まない
    • StatusLabel は、取りうるラベルの種類が決まっていて、同じ状態であれば同じラベルになるステータスに使用する
    • 日数や件数などインスタンスごとに値が変わるものは文字列で表現し、区別しづらい場合は Chip などの使用を検討する
参照元：種類 「種類」の本文へ移動
  • Must
    ステータスの種類に応じて色を使い分ける
    • 特殊なステータス（警告・エラー）を表す場合は、背景色に警告色やエラー色を使う
    • その他のステータスを表す場合は、プロダクトに応じて適宜色を選択する
  • Must
    色のみでステータスを伝えず、適切な名前を付ける
参照元：状態 > 強調の有無 「状態 > 強調の有無」の本文へ移動
  • Should
    他のステータスと区別して視覚的に目立たせたい場合は、背景色と文字色を反転させた「強調あり」のラベルを使う

Props

type
"error""grey""blue""green""red""warning"
bold
falsetrue