Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
in English

Klos di bɔtin

Wan jenɛrik klos bɔtin fɔ dismis kɔntinyu lɛk modal ɛn alɛt.

Ɛgzampul

Gi opshɔn fɔ dismis ɔ lɔk wan kɔmpɔnɛnt wit .btn-close. Difɔlt stayl nɔ bɔku, bɔt dɛn kin kɔstɔmayz am bad bad wan. Modify di Sass variebul dɛn fɔ riples di difɔlt background-image. Mek shɔ se yu put tɛks fɔ di wan dɛn we de rid di skrin , lɛk aw wi dɔn du wit aria-label.

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

Disabled stet

Di klos bɔtin dɛn we nɔ ebul fɔ wok kin chenj dɛn opacity. Wi dɔn aplay bak pointer-events: noneɛn user-select: nonefɔ mek di hover ɛn aktif stet dɛn nɔ trig.

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

Wait vayriɔnt

Chenj di difɔlt .btn-closefɔ bi wayt wit di .btn-close-whiteklas. Dis klas de yuz di filterprɔpati fɔ invayt di 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 we bin de

Di tin dɛn we kin chenj

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