バッジ

hc-badge は、ラベルの隣にステータスを表出させるためのコンパクトな インラインのピルです。バリアントは data-variant で切り替えます。

別名: ステータスラベル、ピル。

基本の HTML

PreviewCode

DraftIn reviewActivePendingFailed

<span class="hc-badge">Draft</span>
<span class="hc-badge" data-variant="info">In review</span>
<span class="hc-badge" data-variant="success">Active</span>
<span class="hc-badge" data-variant="warning">Pending</span>
<span class="hc-badge" data-variant="error">Failed</span>

バリアント

バリアント	用途
省略	中立 / 不明なステータス。
info	情報の状態(例:「In review」)。
success	健全 / 完了の状態。
warning	まもなく注意が必要。
error	失敗 / エラーの状態。

アクセシビリティ

• バッジは視覚的な合図です — 中のテキストがアクセシブルな名前です。 アイコンのみのバッジは避けてください。必要なら視覚的に隠した テキストを含めます。
• 色を唯一の区別にしないでください。意味を運ぶのはバリアントの ラベル(Active、Failed、…)です。色はそれを補強します。
• 読み上げるべき状態変化(例: 注文が「Pending」から「Failed」へ)は、 バッジ自体に頼らず、バッジを aria-live="polite" の領域に入れて ください。

テーマ用トークン

トークンパス	用途
badge.padding-x / -y	インライン / ブロックのパディング。
badge.radius	角丸。
badge.font-size	フォントサイズ。
badge.font-weight	フォントウェイト。
badge.{variant}.{bg,fg,border}	バリアントごとの色。

CSS 変数

生成される CSS 変数を表示

--hc-badge-padding-x | -padding-y | -radius | -font-size | -font-weight
--hc-badge-default-bg | -fg | -border
--hc-badge-info-bg    | -fg | -border
--hc-badge-success-bg | -fg | -border
--hc-badge-warning-bg | -fg | -border
--hc-badge-error-bg  | -fg | -border

関連

• アラート — 目立つ ブロックレベルの通知に。
• テーブル — ステータス列の バッジの定番ホスト。

レシピでの利用: 未読バッジ