StatusLabel

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

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

使用上の注意

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

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

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

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

種類

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

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

状態

強調の有無

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

ライティング

ラベル名は、ユーザーに「タスクの進捗状況」や「要求されているアクション」を伝えることを意識して命名しましょう。

タスクの開始前

最初のステータスです。
まだ最初のアクションが完了していないことを明確にしましょう。

  • ○○前:タスクを進めるためにアクションが必要だが、ユーザーがまだ何もアクションをしていない状態(例:開始前)
  • 未○○:ユーザーが最初のアクションの一部に着手している状態(例:未送信 = 送信先の従業員を追加したが、送信はしていない)

タスクの開始後〜未完了

2つ目以降のステータスです。
どんなアクションが進行中なのか、または次のステータスに移行するまでに何が必要なのかを明確にしましょう。

  • ○○中:アクションが進行している途中の状態(例:依頼準備中、入力中、回答中)
  • ○○待ち:ユーザーがアクションをした後、システムや他の従業員による後続のアクションを待っている状態(例:提出待ち、承認待ち)

タスクの完了後

最後のステータス、または一部のサブタスクが終わった場合のステータスです。
どんなタスクが終わったのかを明確にしましょう。

  • ○○済み:すべてのタスクが終わるまでに複数のサブタスクが存在し、一部のサブタスクが終わった状態(例:設定済み、提出済み)
  • 完了○○完了:すべてのタスクが終わっている状態。なお、○○済みと併用する場合は「完了」を使うこと
  • 終了○○終了:対応期限が過ぎて、アクションが打ち切られている状態(例:回答終了)

問題発生時

問題が発生した場合のステータスです。
処理が失敗したことや、問題解決のためにアクションが必要なことを明確にしましょう。

  • 差し戻し要○○:ユーザーがアクションを取ったが、管理者などの第三者が確認した結果、不備があったため、やり直しを依頼している状態
  • 失敗○○失敗:ユーザーがアクションを取ったが、不備によりシステムエラーが発生し、処理が完了しなかった状態

Props

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