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

html

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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.

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>

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

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>

Couleurs de fond

Ajouté dans v5.2.0

Définissez un background-colorpremier plan contrasté coloravec nos .text-bg-{color}aides . Auparavant, il était nécessaire de coupler manuellement votre choix .text-{color}et des .bg-{color}utilitaires pour le style, que vous pouvez toujours utiliser si vous préférez.

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

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>

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

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

variables

Ajouté dans v5.2.0

Dans le cadre de l'approche évolutive des variables CSS de Bootstrap, les badges utilisent désormais des variables CSS locales .badgepour une personnalisation améliorée en temps réel. Les valeurs des variables CSS sont définies via Sass, de sorte que la personnalisation de Sass est toujours prise en charge également.

  --#{$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};

Variables SSS

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