Badges (バッジ)

バッジについての概要と使い方の例です。

On this page

Example

親要素のサイズに一致するように相対的なフォントサイズ em を使用しています。
v5 以降、バッジにはリンクのフォーカススタイルやホバースタイルがありません。

Example heading New

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

バッジは、リンクやボタンの一部としてカウンターとして使用することができます。

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

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

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

<button type="button" class="btn btn-primary">
  Profile <span class="badge bg-secondary">9</span>
  <span class="visually-hidden">unread messages</span>
</button>

Background colors

バックグラウンドユーティリティクラスを使用して、バッジの外観を変更できます。 Bootstrapのデフォルトの .bg-light を使用する場合、適切なスタイリングのために .text-darkのようなテキストカラーを変更するユーティリティが必要になる可能性があることに注意してください。バックグラウンドユーティリティクラスは、背景色以外は設定をしません。

Primary Secondary Success Danger Warning Info Light Dark

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

支援技術への意味の伝達

色を使って意味を付加することは、視覚的な表示を提供するだけで、スクリーン・リーダーなどの支援技術のユーザーには伝わりません。色で示された情報は、コンテンツ自体から明らかになっているか（例：可視テキスト）、あるいは、.visually-hiddenクラスで隠された追加テキストのような代替手段で含まれていることを確認してください。

Pill badges

.rounded-pill を使用すると丸みを帯びた形状にすることができます。

Primary Secondary Success Danger Warning Info Light Dark

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

Sass

Variables

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;