バッジ (Badge)

ステータス、ラベル、カウント表示に使用する小さなコンポーネントです。色、サイズ、形状をカスタマイズできます。

基本

色・意図バリエーション

プライマリーセカンダリー成功警告危険情報

基本のCode:

<span class=“badge badge-md badge-primary”>プライマリー</span>
<span class=“badge badge-md badge-secondary”>セカンダリー</span>
<span class=“badge badge-md badge-success”>成功</span>
<span class=“badge badge-md badge-warning”>警告</span>
<span class=“badge badge-md badge-danger”>危険</span>
<span class=“badge badge-md badge-info”>情報</span>

サイズ

サイズバリエーション

小中大

サイズのCode:

<span class=“badge badge-sm badge-primary”>小</span>
<span class=“badge badge-md badge-primary”>中</span>
<span class=“badge badge-lg badge-primary”>大</span>

形状

形状バリエーション

角丸ピル型

形状のCode:

<span class=“badge badge-md badge-primary badge-rounded”>角丸</span>
<span class=“badge badge-md badge-primary badge-pill”>ピル型</span>

アイコン付き

アイコンバリエーション

完了

注意

新機能

アイコン付きのCode:

<span class=“badge badge-md badge-success badge-with-icon”>
  <svg class=“badge-icon” fill=“none” stroke=“currentColor” viewBox=“0 0 24 24”>
    <path stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” d=“M5 13l4 4L19 7” />
  </svg>
  完了
</span>

削除可能

閉じるボタン付き

タグ1

タグ2

タグ3

削除可能のCode:

<span class=“badge badge-md badge-primary badge-dismissible”>
  タグ1
  <button class=“badge-close” type=“button” onclick=“this.parentElement.remove()”>
    <svg class=“h-3 w-3” fill=“none” stroke=“currentColor” viewBox=“0 0 24 24”>
      <path stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“2” d=“M6 18L18 6M6 6l12 12” />
    </svg>
  </button>
</span>

通知バッジ

カウント表示

3
99+

通知バッジのCode:

<!— 数字バッジ —>
<div class=“relative”>
  <button class=“btn btn-secondary btn-md” type=“button”>メッセージ</button>
  <span class=“badge-notification”>3</span>
</div>

<!— ドットバッジ —>
<div class=“relative”>
  <button class=“btn btn-secondary btn-md” type=“button”>お知らせ</button>
  <span class=“badge-dot”></span>
</div>

実用的なパターン

ステータス表示

注文 #12345発送済み
注文 #12346処理中
注文 #12347キャンセル

タグ表示

React入門講座

ReactJavaScript初心者向け人気

ユーザーステータス

田中太郎

認証済み

管理者

ステータス表示のCode:

<div class=“flex items-center gap-3”>
  <span class=“text-sm font-medium text-gray-900”>注文 #12345</span>
  <span class=“badge badge-sm badge-success”>発送済み</span>
</div>

タグ表示のCode:

<div class=“flex flex-wrap gap-2”>
  <span class=“badge badge-sm badge-primary badge-pill”>React</span>
  <span class=“badge badge-sm badge-secondary badge-pill”>JavaScript</span>
  <span class=“badge badge-sm badge-info badge-pill”>初心者向け</span>
</div>

アクセシビリティ

  • • バッジは情報表示のみに使用し、インタラクティブな操作には使用しない
  • • 削除可能なバッジの閉じるボタンは適切なaria-labelを提供
  • • 色だけでなくテキストでも状態や意味を表現する
  • • 通知バッジにはaria-labelで内容を説明
  • • 十分なコントラスト比を確保（背景色とテキスト色）
  • • スクリーンリーダーで読み上げられる適切なテキストを提供
  • • 削除機能はbutton要素を使用し、キーボード操作に対応
完了進行中エラー