Kawngkhar khar rawh

Modal leh alerts ang chi content paih chhuahna tur generic close button.

He page ah hian

Entirna

Component pakhat dismiss emaw close emaw theihna option pe rawh .btn-close. Default styling a tlem a, mahse customizable sang tak a ni. Sass variable te chu default thlak turin siam danglam rawh background-image. Screen reader tan text pawh dah tel ngei ang che , kan tih tawh ang khan aria-label.

html tih a ni

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

Disabled state a ni

Disabled close button te chuan an opacity. Kan apply bawk a pointer-events: none, user-select: nonehover leh active state te trigger loh nan.

html tih a ni

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

White variant a ni

Default chu class .btn-closenen white turin thlak rawh. .btn-close-whiteHe class hian filterproperty hmangin background-image.

html tih a ni

<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 a ni

Variables te pawh a awm

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