バッジ Badge

ステータスや数量を示す小さなラベル。通知数やカテゴリ表示に使用。

使用場面: 通知数、ステータス表示、カテゴリタグ、未読カウント 採用例: LINE, App Store

ライブデモ

Primary Success Warning Danger
Outline Subtle
通知 5
オンライン オフライン

ソースコード

<div class="demo-badges">
  <div class="demo-badge-row">
    <span class="demo-badge demo-badge-primary">Primary</span>
    <span class="demo-badge demo-badge-success">Success</span>
    <span class="demo-badge demo-badge-warning">Warning</span>
    <span class="demo-badge demo-badge-danger">Danger</span>
  </div>
  <div class="demo-badge-row">
    <span class="demo-badge demo-badge-outline">Outline</span>
    <span class="demo-badge demo-badge-subtle">Subtle</span>
  </div>
  <div class="demo-badge-row">
    <span class="demo-badge-with-icon">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
      通知
      <span class="demo-badge-count">5</span>
    </span>
  </div>
  <div class="demo-badge-row">
    <span class="demo-badge demo-badge-dot"><span class="demo-badge-dot-indicator"></span>オンライン</span>
    <span class="demo-badge demo-badge-dot"><span class="demo-badge-dot-indicator offline"></span>オフライン</span>
  </div>
</div>
.demo-badges { display: flex; flex-direction: column; gap: 14px; }
.demo-badge-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.demo-badge {
  display: inline-flex; align-items: center; padding: 4px 12px;
  border-radius: 20px; font-size: 12px; font-weight: 600;
}
.demo-badge-primary { background: var(--ui-primary); color: #fff; }
.demo-badge-success { background: #22c55e; color: #fff; }
.demo-badge-warning { background: #f59e0b; color: #fff; }
.demo-badge-danger { background: #ef4444; color: #fff; }
.demo-badge-outline {
  background: transparent; color: var(--ui-primary);
  border: 1.5px solid var(--ui-primary);
}
.demo-badge-subtle {
  background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
  color: var(--ui-primary);
}
.demo-badge-with-icon {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 13px; color: #444; position: relative;
}
.demo-badge-count {
  background: var(--ui-primary); color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center;
}
.demo-badge-dot { gap: 6px; font-size: 13px; color: #555; }
.demo-badge-dot-indicator {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
}
.demo-badge-dot-indicator.offline { background: #d1d5db; }

AIプロンプト

Basic 
バッジコンポーネントをHTML/CSSで作ってください。ラベルやステータスを表示する小さなタグです。
Custom 
以下の仕様でバッジを実装してください。
- カラーバリエーション：primary, success, warning, danger
- プライマリカラー: #2563eb
- スタイルバリエーション：filled, outline, subtle
- サイズバリエーション（S/M/L）
- アイコン + テキスト
- 数値カウント（通知バッジ）
- ドット型ステータスインジケーター
Advanced 
高機能バッジシステムを実装してください。
- 9+, 99+, 999+ の自動省略表示
- アニメーション（新しいバッジが追加された時のバウンス）
- バッジの位置指定（top-right, top-left, bottom-right, bottom-left）
- 親要素に対する相対配置
- 削除可能バッジ（×ボタン付き）
- パルスアニメーション（注目を引く）
- aria-label で数値をスクリーンリーダーに通知
- ダークモード対応
- CSS Counterとの連携
← カタログに戻る