バッジ Badges

バッジ、小さなカウントとラベリングコンポーネントのドキュメントと例。

On this page

例

バッジは相対的なフォントサイズと em ユニットを使用して、直接の親要素のサイズに合わせて拡大縮小されます。v5 以降、バッジはリンクに対するフォーカスやホバースタイルを持たなくなりました。

見出し

Example heading New

html

<h1>Example heading <span class="badge text-bg-secondary">New</span></h1>
<h2>Example heading <span class="badge text-bg-secondary">New</span></h2>
<h3>Example heading <span class="badge text-bg-secondary">New</span></h3>
<h4>Example heading <span class="badge text-bg-secondary">New</span></h4>
<h5>Example heading <span class="badge text-bg-secondary">New</span></h5>
<h6>Example heading <span class="badge text-bg-secondary">New</span></h6>

ボタン

バッジはリンクやボタンの一部として使用され、カウンターを提供できます。

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

使用方法によっては、バッジはスクリーンリーダーや同様の支援技術のユーザーにとって混乱を招く可能性があることに注意してください。バッジのスタイリングはその目的を視覚的に示しますが、これらのユーザーには単にバッジの内容が提示されるだけです。特定の状況によっては、これらのバッジは文、リンク、またはボタンの最後にあるランダムな追加の単語や数字のように見えるかもしれません。

コンテキストが明確でない限り (「Notifications」の例のように、「4」が通知の数であることが理解されている場合)、視覚的に隠された追加のテキストで追加のコンテキストを含めることを検討してください。

配置

ユーティリティを使用して .badge を変更し、リンクまたはボタンの角に配置します。

html

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

カウントなしでより汎用的なインジケータを作成するために、.badge クラスをいくつかのユーティリティに置き換えることもできます。

html

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

背景色

Added in v5.2.0

.text-bg-{color} ヘルパーを使用して、コントラストのある前景 color で background-color を設定します。以前は、スタイリングのために .text-{color} と .bg-{color} ユーティリティの選択を手動でペアリングする必要がありましたが、お好みであればまだ使用できます。

Primary Secondary Success Danger Warning Info Light Dark

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

アクセシビリティのヒント: 色を使用して意味を追加することは視覚的な表示のみを提供し、スクリーンリーダーなどの支援技術のユーザーには伝わりません。意味がコンテンツ自体から明らかであること(例えば、十分な色のコントラストを持つ表示テキスト)を確認するか、.visually-hiddenクラスで非表示にした追加テキストなどの代替手段を通じて含めてください。

Pill バッジ

.rounded-pill ユーティリティクラスを使用して、より大きな border-radius でバッジをより丸くします。

Primary Secondary Success Danger Warning Info Light Dark

html

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

変数

Added in v5.2.0

Bootstrap の進化する CSS 変数アプローチの一部として、バッジは .badge 上でローカル CSS 変数を使用し、リアルタイムのカスタマイズを強化します。CSS 変数の値は Sass を介して設定されるため、Sass のカスタマイズも引き続きサポートされます。

scss/_badge.scss

--#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y};
@include rfs($badge-font-size, --#{$prefix}badge-font-size);
--#{$prefix}badge-font-weight: #{$badge-font-weight};
--#{$prefix}badge-color: #{$badge-color};
--#{$prefix}badge-border-radius: #{$badge-border-radius};

Sass 変数

scss/_variables.scss

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               var(--#{$prefix}border-radius);