Bouton Fermer

Un bouton de fermeture générique pour ignorer le contenu comme les modaux et les alertes.

Sur cette page

Exemple

Fournir une option pour ignorer ou fermer un composant avec .btn-close. Le style par défaut est limité, mais hautement personnalisable. Modifiez les variables Sass pour remplacer la valeur par défaut background-image. Assurez-vous d'inclure du texte pour les lecteurs d'écran , comme nous l'avons fait avec aria-label.

html

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

État désactivé

Les boutons de fermeture désactivés changent leur opacity. Nous avons également appliqué pointer-events: noneet user-select: nonepour empêcher le survol et les états actifs de se déclencher.

html

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

Variante blanche

Modifiez la valeur par défaut .btn-closepour qu'elle soit blanche avec la .btn-close-whiteclasse. Cette classe utilise la filterpropriété pour inverser le background-image.

html

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

Toupet

variables

$btn-close-width:            1em;
$btn-close-height:           $btn-close-width;
$btn-close-padding-x:        .25em;
$btn-close-padding-y:        $btn-close-padding-x;
$btn-close-color:            $black;
$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>");
$btn-close-focus-shadow:     $input-btn-focus-box-shadow;
$btn-close-opacity:          .5;
$btn-close-hover-opacity:    .75;
$btn-close-focus-opacity:    1;
$btn-close-disabled-opacity: .25;
$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%);