Spring til hovedindhold Spring til dokumentnavigation
Check
in English

Luk knap

En generisk lukkeknap til at afvise indhold som modals og advarsler.

På denne side

Eksempel

Giv en mulighed for at afvise eller lukke en komponent med .btn-close. Standard styling er begrænset, men meget tilpasselig. Rediger Sass-variablerne for at erstatte standarden background-image. Sørg for at inkludere tekst til skærmlæsere , som vi har gjort med aria-label.

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

Deaktiveret tilstand

Deaktiverede lukkeknapper ændrer deres opacity. Vi har også anvendt pointer-events: noneog user-select: nonetil at forhindre svæve- og aktive tilstande i at udløse.

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

Hvid variant

Skift standarden .btn-closetil at være hvid med .btn-close-whiteklassen. Denne klasse bruger filteregenskaben til at invertere 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>

Sass

Variabler

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