Insignes

Documentation et exemples pour les badges, notre composant petit comptage et étiquetage.

Exemple

Les badges sont mis à l'échelle pour correspondre à la taille de l'élément parent immédiat en utilisant une taille de police et emdes unités relatives.

Exemple de titreNouveau

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

Les badges peuvent être utilisés dans le cadre de liens ou de boutons pour fournir un compteur.

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

Notez que selon la façon dont ils sont utilisés, les badges peuvent prêter à confusion pour les utilisateurs de lecteurs d'écran et de technologies d'assistance similaires. Alors que le style des badges fournit une indication visuelle de leur objectif, ces utilisateurs verront simplement le contenu du badge. Selon la situation spécifique, ces badges peuvent ressembler à des mots ou des chiffres supplémentaires aléatoires à la fin d'une phrase, d'un lien ou d'un bouton.

À moins que le contexte ne soit clair (comme dans l'exemple "Notifications", où il est entendu que le "4" est le nombre de notifications), envisagez d'inclure un contexte supplémentaire avec un morceau de texte supplémentaire masqué visuellement.

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

Variations contextuelles

Ajoutez l'une des classes de modificateurs mentionnées ci-dessous pour modifier l'apparence d'un badge.

Primaire Secondaire Succès Danger Avertissement Info Lumière Sombre

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

Donner du sens aux technologies d'assistance

L'utilisation de la couleur pour ajouter du sens ne fournit qu'une indication visuelle, qui ne sera pas transmise aux utilisateurs de technologies d'assistance, telles que les lecteurs d'écran. Assurez-vous que les informations désignées par la couleur sont soit évidentes à partir du contenu lui-même (par exemple, le texte visible), soit incluses par des moyens alternatifs, tels que du texte supplémentaire masqué avec la .sr-onlyclasse.

Insignes de pilule

Utilisez la .badge-pillclasse de modificateur pour rendre les badges plus arrondis (avec un border-radiushorizontal plus grand et supplémentaire padding). Utile si vous manquez les badges de la v3.

Primaire Secondaire Succès Danger Avertissement Info Lumière Sombre

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

Liens

.badge-*L'utilisation des classes contextuelles sur un <a>élément fournit rapidement des badges actionnables avec des états de survol et de focus .

Primaire Secondaire Succès Danger Avertissement Info Lumière Sombre

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