ステータス・ピル（点付き）
先頭に小さな丸い点を置いて状態を示す、ピル型のステータスラベルです。Active・Processing・Pending・Failed の 4 種を、それぞれ sp--ok などの修飾クラスで色分けしています。
解説
先頭に小さな丸い点を置いて状態を示す、ピル型のステータスラベルです。Active・Processing・Pending・Failed の 4 種を、それぞれ sp--ok などの修飾クラスで色分けしています。背景は rgba による薄い透過色、文字は同系統の濃い色という組み合わせで、強すぎず一目で状態が区別できる配色にしています。点と文字は inline-flex で横並びにし、border-radius:999px で丸いピル形にしています。
表示すると分かりやすい場面
- 管理画面の処理状況（実行中・完了・失敗）
- 注文や申請のステータス一覧
- サーバーやジョブの稼働状態モニタ
新しい状態を足したいときは、修飾クラスを 1 つ追加して背景の rgba と文字色を決めるだけで増やせます。色だけで意味を伝えると色覚特性のある利用者に伝わりにくいので、Active や Failed といった文言を必ず併記するのが大切です。点は文中の文字として置いているため、装飾と分かるよう簡潔に保ち、状態の本文を主役にしておくと読み取りやすくなります。
よくある質問
新しいステータスの色を追加するには。
sp--ok のような修飾クラスをもう一つ作り、背景の rgba 値と文字色を決めるだけで追加できます。背景は薄い透過色、文字は同系の濃い色にすると統一感が出ます。
色だけで状態を区別して大丈夫ですか。
色だけに頼るのは避けるのが安全です。Active や Failed のような文言を必ず添えると、色の違いが分かりにくい利用者にも状態が正しく伝わります。