View on GitHub

Close button

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

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">.

html
<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.

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

Dark variant

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

html
<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>

Without specific class

Close buttons can also be created without .btn-close.

html
<button type="button" class="btn btn-icon btn-no-outline">
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.2/assets/img/boosted-sprite.svg#delete"></use></svg>
  <span class="visually-hidden">Close</span>
</button>

<button type="button" class="btn btn-icon btn-no-outline" disabled>
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.2/assets/img/boosted-sprite.svg#delete"></use></svg>
  <span class="visually-hidden">Close</span>
</button>

Sass

Variables

$btn-close-width:            $spacer;
$btn-close-height:           $btn-close-width;
$btn-close-padding:          var(--#{$boosted-prefix}icon-spacing, #{$btn-icon-padding-x});
$btn-close-color:            $black;
$btn-close-bg:               var(--#{$boosted-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