Insignes

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

Sur cette page

Exemples

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. À partir de la v5, les badges n'ont plus de styles de focus ou de survol pour les liens.

Rubriques

Exemple de titreNouveau

<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>

Boutons

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 bg-secondary">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.

Positionné

Utilisez des utilitaires pour modifier un .badgeet le positionner dans le coin d'un lien ou d'un bouton.

<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>

Vous pouvez également remplacer la .badgeclasse par quelques utilitaires supplémentaires sans compter pour un indicateur plus générique.

<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>

Couleurs de fond

Utilisez nos classes utilitaires d'arrière-plan pour modifier rapidement l'apparence d'un badge. Veuillez noter que lorsque vous utilisez la valeur par défaut de Bootstrap .bg-light, vous aurez probablement besoin d'un utilitaire de couleur de texte, comme .text-darkpour un style approprié. En effet, les utilitaires d'arrière-plan ne définissent rien d'autre que background-color.

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

<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>

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 .visually-hiddenclasse.

Insignes de pilule

Utilisez la .rounded-pillclasse utilitaire pour rendre les badges plus arrondis avec un plus grand border-radius.

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

<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>

Toupet

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;