View on GitHub

Close button

A generic close button for dismissing content like modals and alerts.

On this page

Example

Provide an option to dismiss or close a component with .btn-close. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default mask-image. Be sure to include text for screen readers, as we’ve done with <span class="visually-hidden">.

<button type="button" class="btn-close"><span class="visually-hidden">Close</span></button>

Disabled state

Disabled close buttons change their color. We’ve also applied pointer-events: none and user-select: none to preventing hover and active states from triggering.

<button type="button" class="btn-close" disabled><span class="visually-hidden">Close</span></button>

White variant

Change the default .btn-close to be white with the .btn-close-white class.

<button type="button" class="btn-close btn-close-white"><span class="visually-hidden">Close</span></button>
<button type="button" class="btn-close btn-close-white" disabled><span class="visually-hidden">Close</span></button>

Sass

Variables

$btn-close-width:            $spacer;
$btn-close-height:           $btn-close-width;
$btn-close-padding:          var(--#{$boosted-variable-prefix}icon-spacing, #{$btn-icon-padding-x});
$btn-close-color:            $black;
$btn-close-bg:               var(--#{$boosted-variable-prefix}close-icon);
$btn-close-focus-shadow:     $btn-focus-box-shadow;

// Boosted mod
$btn-close-icon-size:        1rem auto;
$btn-close-padding-sm:       subtract($btn-icon-padding-x, $spacer * .25);
// End mod