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

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

Add .btn-close-white to the .btn-close for a dark variant.

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 to reduce the size of your CSS bundle.

html

<button type="button" class="btn btn-icon btn-no-outline">
  <svg width="1.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/innovation-cup/docs/0.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.5rem" height="1.5rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/innovation-cup/docs/0.2/assets/img/boosted-sprite.svg#delete"></use></svg>
  <span class="visually-hidden">Close</span>
</button>

CSS

Variables

As part of Boosted Innovation Cup’s evolving CSS variables approach, close buttons now use local CSS variables on .btn-close for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

  --#{$prefix}btn-close-padding: #{$btn-close-padding}; // Boosted mod
  --#{$prefix}btn-close-border-width: #{$btn-close-border-width}; // Boosted mod
  --#{$prefix}btn-close-color: #{$btn-close-color}; // Boosted mod
  --#{$prefix}btn-close-bg: #{$btn-close-bg}; // Boosted mod
  --#{$prefix}btn-close-border-color: #{$btn-close-border-color}; // Boosted mod
  --#{$prefix}btn-close-hover-color: #{$btn-close-hover-color}; // Boosted mod
  --#{$prefix}btn-close-active-color: #{$btn-close-active-color}; // Boosted mod
  --#{$prefix}btn-close-active-border-color: #{$btn-close-active-border-color}; // Boosted mod
  --#{$prefix}btn-close-disabled-color: #{$btn-close-disabled-color}; // Boosted mod

Customization through CSS variables can be seen on the .btn-close-white modifier class where we override specific values without adding duplicate CSS selectors.

  --#{$prefix}btn-close-color: #{$btn-close-white-color}; // Boosted mod
  --#{$prefix}btn-close-bg: #{$btn-close-white-bg}; // Boosted mod
  --#{$prefix}btn-close-border-color: #{$btn-close-white-border-color}; // Boosted mod
  --#{$prefix}btn-close-hover-color: #{$btn-close-white-hover-color}; // Boosted mod
  --#{$prefix}btn-close-active-color: #{$btn-close-white-active-color}; // Boosted mod
  --#{$prefix}btn-close-active-border-color: #{$btn-close-white-active-border-color}; // Boosted mod
  --#{$prefix}btn-close-disabled-color: #{$btn-close-white-disabled-color}; // Boosted mod

Sass variables

Variables for all close buttons:

$btn-close-width:               $spacer; // Boosted mod
$btn-close-height:              $btn-close-width;
$btn-close-padding:             var(--#{$boosted-prefix}icon-spacing, #{$btn-icon-padding-x}); // Boosted mod
$btn-close-border-width:        $border-width; // Boosted mod
$btn-close-border-color:        transparent; // Boosted mod
$btn-close-color:               $black;
$btn-close-bg:                  var(--#{$boosted-prefix}close-icon); // Boosted mod
$btn-close-focus-shadow:        $btn-focus-box-shadow;
// Boosted mod: no opacity/filter

// Boosted mod
$btn-close-hover-color:         $btn-close-color;
$btn-close-active-color:        $primary;
$btn-close-active-border-color: $gray-500;
$btn-close-disabled-color:      $gray-500;

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

Variables for the dark close button:

$btn-close-white-color:               $white; // Boosted mod
$btn-close-white-bg:                  transparent; // Boosted mod
$btn-close-white-border-color:        transparent; // Boosted mod
$btn-close-white-hover-color:         $btn-close-white-color; // Boosted mod
$btn-close-white-active-color:        $primary; // Boosted mod
$btn-close-white-active-border-color: $gray-700; // Boosted mod
$btn-close-white-disabled-color:      $gray-700; // Boosted mod