ステータスバッジセット
このステータスバッジは、公開中・審査中・停止といった状態を色で一目で示す小さなラベルです。実装は CSS のみで、JavaScript は使いません。 border-radius:9999px で角を完全な丸にし、状態ごとに --ok --wait --ng の修飾クラスを当てて背景色と文字色を切り替えています。
解説
このステータスバッジは、公開中・審査中・停止といった状態を色で一目で示す小さなラベルです。実装は CSS のみで、JavaScript は使いません。border-radius:9999px で角を完全な丸にし、状態ごとに --ok--wait--ng の修飾クラスを当てて背景色と文字色を切り替えています。緑・黄・赤の組み合わせは信号機の感覚と同じで、説明なしでも意味が伝わるのが利点です。
使うと良い場面
- 管理画面の一覧で、各レコードの公開状況を示す
- 注文や申請のステータス（受付中・処理中・完了）を表示する
- 記事やタスクの進行段階をカードの隅に添える
色は背景と文字をペアで持っているので、ブランドに合わせて差し替える場合は 両方の明度差を保つ ことが大切です。背景が薄く文字が濃い配色だと小さな文字でも読みやすくなります。色だけに頼ると色覚特性のある人に伝わりにくいため、テキストラベルを必ず残すか、状態を示すアイコンを添えると親切です。横並びは flex と gap で間隔を取っているので、数が増えても折り返しの調整が容易です。
よくある質問
バッジの色を自社カラーに変えられますか
できます。各修飾クラス（bs__b--ok など）の background と color の2値を書き換えるだけです。背景は薄め、文字は濃いめにして明度差を保つと、12pxの小さな文字でも読みやすくなります。
状態の種類を増やしたいときはどうしますか
新しい修飾クラスを1つ追加し、背景色と文字色を指定します。たとえば下書きを表すグレー系を作るなら、薄いグレー背景に濃いグレー文字を割り当て、HTML側でそのクラスを持つ要素を加えるだけで増やせます。