Composants

Badges

Un badge est une petite étiquette qui accompagne un texte ou un bouton : compteur, statut, nouveauté. Il se dimensionne par rapport au texte qui l’entoure.

Badge dans un titre ou un texte#

Le badge hérite de la taille de son parent (.75em) : placé dans un titre, il grandit avec lui.

Opérations Nouveau

Alertes 4

Prêt immobilier En cours

<h3>Opérations <span class="badge text-bg-secondary">Nouveau</span></h3>
<h5>Alertes <span class="badge text-bg-secondary">4</span></h5>
<p>Prêt immobilier <span class="badge text-bg-primary">En cours</span></p>

Badge dans un bouton#

Ajoutez un texte masqué avec visually-hidden pour que les lecteurs d’écran comprennent ce que le chiffre représente.

<button type="button" class="btn btn-primary">
  Messages <span class="badge text-bg-light">4<span class="visually-hidden"> messages non lus</span></span>
</button>

Couleurs#

Utilisez text-bg-* : il associe automatiquement le fond et une couleur de texte contrastée. text-bg-secondary et text-bg-success ont la même teinte verte dans Cauri.

Principal Secondaire Validé Refusé En attente Information Clair Sombre

<span class="badge text-bg-primary">Principal</span>
<span class="badge text-bg-secondary">Secondaire</span>
<span class="badge text-bg-success">Validé</span>
<span class="badge text-bg-danger">Refusé</span>
<span class="badge text-bg-warning">En attente</span>
<span class="badge text-bg-info">Information</span>
<span class="badge text-bg-light">Clair</span>
<span class="badge text-bg-dark">Sombre</span>

Badge arrondi#

La classe rounded-pill donne une forme de gélule, adaptée aux compteurs.

12 Actif Clôturé

<span class="badge rounded-pill text-bg-primary">12</span>
<span class="badge rounded-pill text-bg-success">Actif</span>
<span class="badge rounded-pill text-bg-danger">Clôturé</span>

Badge positionné#

Avec les utilitaires de position, placez un badge sur le coin d’un bouton. Un badge sans contenu est masqué automatiquement par Cauri (:empty).

<button type="button" class="btn btn-primary position-relative">
  Notifications
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">
    3<span class="visually-hidden"> notifications non lues</span>
  </span>
</button>

<button type="button" class="btn btn-outline-primary position-relative ms-4">
  Profil
  <span class="position-absolute top-0 start-100 translate-middle p-2 text-bg-danger border border-light rounded-circle">
    <span class="visually-hidden">Nouvelles alertes</span>
  </span>
</button>

Classes

Classes
Classe	Rôle
`badge`	Base du badge : taille relative, graisse, arrondi et alignement.
`text-bg-primary`, `text-bg-secondary`, `text-bg-success`, `text-bg-danger`, `text-bg-warning`, `text-bg-info`, `text-bg-light`, `text-bg-dark`	Couleur de fond avec texte contrasté.
`rounded-pill`	Forme de gélule.
`position-absolute`, `top-0`, `start-100`, `translate-middle`	Placent le badge sur un coin du parent `position-relative`.

Variables Sass

Variables Sass
Variable	Défaut	Rôle
`$badge-font-size`	`.75em`	Taille du texte, relative au parent.
`$badge-font-weight`	`700`	Graisse du texte.
`$badge-color`	`#fff`	Couleur du texte par défaut.
`$badge-padding-y`	`.35em`	Espacement vertical.
`$badge-padding-x`	`.65em`	Espacement horizontal.
`$badge-border-radius`	`var(--bs-border-radius)`	Arrondi des angles.

Personnalisation#

Le badge expose des propriétés CSS locales (--bs-badge-padding-x, --bs-badge-padding-y, --bs-badge-font-size, --bs-badge-font-weight, --bs-badge-color, --bs-badge-border-radius).

// Global : avant l'import de Cauri
$badge-font-weight: 600;
$badge-padding-x: 0.75em;

// Local : un badge plus discret
.badge-discret {
  --bs-badge-font-size: 0.7em;
  --bs-badge-padding-y: 0.25em;
  --bs-badge-font-weight: 500;
}

Bonnes pratiques

À faire

Gardez un contenu très court : un chiffre ou un mot.
Utilisez text-bg-* plutôt que bg-* pour garantir un texte lisible.
Choisissez des couleurs cohérentes d’un écran à l’autre (par exemple vert pour « Validé », rouge pour « Refusé »).

À éviter

Ne vous servez pas d’un badge comme d’un bouton : il n’est pas interactif.
Ne portez pas une information essentielle par la seule couleur du badge.
N’affichez pas de longues phrases dans un badge.

Accessibilité

Ajoutez un texte masqué (visually-hidden) qui explique le chiffre : « 3 notifications non lues » plutôt que « 3 ».
Pour un badge de statut, le mot lui-même (« En attente ») suffit ; la couleur n’est qu’un renfort.
Un badge sans texte visible doit avoir un équivalent textuel masqué, sinon il est ignoré des lecteurs d’écran.