Skip to main content Skip ad navigationem soUicitudo
in English

Close button

Bulla generica proxima ad dimittendum contenta sicut modales et erectus.

Exemplum

Providere optionem dimittendi vel claudendi componentis cum .btn-close. Default texting is limited, but highly customizable. Mutare variabiles Sass defaltam reponere background-image. Vide ut textum ad screen legentium comprehendere , sicut cum fecimus aria-label.

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

Disabled statum

Debilitatum prope globulis mutare opacity. Applicavimus etiam pointer-events: noneet user-select: nonead prohibendos aliquet et activos status a excitato.

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

Album variant

Mutare default .btn-closeut album cum .btn-close-whitegenere. Hoc genere filterproprietate utitur ad invertendum background-image.

<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

Variabilium

$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 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-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%);