Klo nu ƒe dzesi

A generic close button na gbegbe nyatakakawo abe modals kple nuxlɔ̃amewo.

Le axa sia dzi

Kpɔɖeŋu

Na tiatia aɖe be nàɖe asi le akpa aɖe ŋu alo axe mɔ ɖe enu kple .btn-close. Atsyã si woɖo ɖi la seɖoƒe li na, gake woate ŋu atrɔ asi le eŋu ŋutɔ. Trɔ asi le Sass ƒe tɔtrɔwo ŋu be woaxɔ ɖe gbãtɔa teƒe background-image. Kpɔ egbɔ be yeŋlɔ nuŋɔŋlɔwo ɖe eme na screen readers abe alesi míewɔe kple aria-label.

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

Nuwɔametɔ ƒe nɔnɔme

Nuwɔametɔ ƒe nutrenu ƒe abɔtawo trɔa woƒe opacity. Míewɔ dɔ hã pointer-events: nonekple user-select: nonebe míaxe mɔ ɖe hover kple active states nu be woagaʋã o.

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

White ƒe tɔtrɔ

Trɔ default la .btn-closebe wòanye yevu kple .btn-close-whiteklass la. Klass sia zãa filternɔnɔmea tsɔ trɔa asi le 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 ƒe nyawo

Nusiwo trɔna

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