ステータス表示バッジ群
「公開中 / 下書き / 非公開 / アーカイブ」など、状態を一目で示す カラーバッジ群 です。共通の bd クラスで形を揃え、状態ごとの修飾クラス（ bd--ok など）で色だけを切り替える設計です。色は rgba で半透明の背景・濃いめの文字・薄い枠線を組み合わせ、塗りつぶし過ぎず落ち着いた印象にしています。
解説
「公開中 / 下書き / 非公開 / アーカイブ」など、状態を一目で示すカラーバッジ群です。共通の bd クラスで形を揃え、状態ごとの修飾クラス（bd--ok など）で色だけを切り替える設計です。色は rgba で半透明の背景・濃いめの文字・薄い枠線を組み合わせ、塗りつぶし過ぎず落ち着いた印象にしています。border-radius:999px で丸いピル型にし、CMS らしい軽い見た目です。
使う場面
- 記事や商品の公開状態を示す CMS の一覧
- ダッシュボードのステータス列やフィルタチップ
- 申請の進捗（受付中・承認済みなど）の表示
状態を増やすときは修飾クラスを1つ足し、背景・文字・枠線の3色を決めるだけで追加できます。色は意味と結びつくよう、肯定は緑系・注意は黄系・停止は赤系と直感に沿わせると分かりやすくなります。先頭の記号（●○⊘）は色覚に頼らず状態を区別する補助にもなりますが、形だけで意味が伝わるとは限らないため、文字ラベルを必ず添えてアクセシビリティを保ちましょう。
よくある質問
新しいステータスを追加できますか
できます。bd--xxx の形で修飾クラスを1つ足し、背景・文字・枠線の3色を指定するだけで新しい状態のバッジを増やせます。
色だけで状態を区別して問題ありませんか
色覚に配慮し、先頭の記号と文字ラベルを併用すると安心です。色だけに頼らず文言で状態が分かるようにしておきましょう。