Composants

Bouton de fermeture

Le bouton de fermeture est une petite croix qui sert à refuser ou à fermer un élément : alerte, fenêtre modale, panneau latéral, toast. Il se compose d’un simple button avec la classe btn-close.

Bouton de base#

Donnez toujours un aria-label : la croix n’a aucun texte visible.

<button type="button" class="btn-close" aria-label="Fermer"></button>

Bouton désactivé#

L’attribut disabled baisse l’opacité à .25 et supprime les interactions.

<button type="button" class="btn-close" disabled aria-label="Fermer"></button>

Dans une alerte#

Avec data-bs-dismiss, le bouton ferme le composant qui le contient. Les composants compatibles sont les alertes (alert), les fenêtres modales (modal), les panneaux latéraux (offcanvas) et les toasts (toast).

Votre relevé de compte est prêt.

<div class="alert alert-info alert-dismissible fade show" role="alert">
  Votre relevé de compte est prêt.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button>
</div>

Sur fond foncé#

La croix est noire par défaut. Sur un fond sombre, inversez-la avec le filtre CSS --bs-btn-close-filter : invert(1) grayscale(100%) brightness(200%) la rend blanche.

Mode de paiement enregistré

<div class="bg-dark p-3 d-flex justify-content-between align-items-center rounded">
  <span class="text-white">Mode de paiement enregistré</span>
  <button type="button" class="btn-close" style="--bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);" aria-label="Fermer"></button>
</div>

Variables Sass

Variables Sass
Variable	Défaut	Rôle
`$btn-close-width`	`1em`	Largeur de la croix.
`$btn-close-height`	`$btn-close-width`	Hauteur de la croix.
`$btn-close-padding-x`	`.25em`	Zone de clic horizontale autour de la croix.
`$btn-close-padding-y`	`.25em`	Zone de clic verticale autour de la croix.
`$btn-close-color`	`#000`	Couleur de la croix (utilisée dans l’image SVG).
`$btn-close-bg`	SVG en `data:` URI	Image de la croix.
`$btn-close-focus-shadow`	`$focus-ring-box-shadow`	Anneau de focus (bleu BDU, 25 % d’opacité).
`$btn-close-opacity`	`.5`	Opacité au repos.
`$btn-close-hover-opacity`	`.75`	Opacité au survol.
`$btn-close-focus-opacity`	`1`	Opacité au focus.
`$btn-close-disabled-opacity`	`.25`	Opacité à l’état désactivé.
`$btn-close-filter`	`null`	Filtre CSS appliqué à la croix.

Attributs et propriétés CSS

Attributs et propriétés CSS
Nom	Rôle
`data-bs-dismiss="alert"`	Ferme l’alerte parente.
`data-bs-dismiss="modal"`	Ferme la fenêtre modale parente. Voir Modale.
`data-bs-dismiss="offcanvas"`	Ferme le panneau latéral parent. Voir Offcanvas.
`data-bs-dismiss="toast"`	Ferme le toast parent. Voir Toasts.
`--bs-btn-close-color`	Couleur de la croix.
`--bs-btn-close-bg`	Image de fond de la croix.
`--bs-btn-close-opacity`, `--bs-btn-close-hover-opacity`, `--bs-btn-close-focus-opacity`, `--bs-btn-close-disabled-opacity`	Opacités selon l’état.
`--bs-btn-close-focus-shadow`	Anneau de focus.
`--bs-btn-close-filter`	Filtre appliqué à la croix, utile sur fond foncé.

Personnalisation#

// Global : avant l'import de Cauri
$btn-close-opacity: 0.7;
$btn-close-hover-opacity: 1;
$btn-close-padding-x: 0.5em;
$btn-close-padding-y: 0.5em;

// Local : une croix plus grande
.btn-close-grand {
  width: 1.5em;
  height: 1.5em;
}

Bonnes pratiques

À faire

Placez la croix en haut à droite du composant qu’elle ferme, là où l’utilisateur l’attend.
Donnez-lui une zone de clic confortable (le padding par défaut ajoute 0,25 em autour de la croix).
Vérifiez le contraste de la croix sur son fond ; inversez-la sur les fonds foncés.

À éviter

Ne l’utilisez pas pour une action qui n’est pas une fermeture (supprimer, annuler une opération) : choisissez un bouton avec un libellé.
Ne la laissez pas sans aria-label ni texte masqué.
Ne l’employez pas comme seule issue d’un message qui demande une décision : proposez aussi un bouton explicite.

Accessibilité

Le aria-label="Fermer" est obligatoire ; précisez-le (« Fermer l’alerte ») si plusieurs croix sont visibles.
Le bouton reçoit le focus au clavier et affiche un anneau de focus ; ne le supprimez pas.
Un bouton désactivé n’est plus atteignable au clavier : réservez cet état aux cas où la fermeture est temporairement impossible.