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" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="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 data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><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" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
<button type="button" class="btn-close btn-close-white" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>

Eco-design variant

For eco-design reasons, close buttons can also be created without .btn-close to reduce the size of your CSS bundle. It means that you don’t have to import _close.scss in your Sass file if you are an advanced Boosted user using custom Sass imports.

If you choose this option, please be aware that if the design of close buttons change in the future, this section might disappear and you would have to use .btn-close to your close buttons or change the combinations of classes.

html

<button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/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 data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
  <span class="visually-hidden">Close</span>
</button>

<button type="button" class="btn btn-icon btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
  <span class="visually-hidden">Close</span>
</button>

<button type="button" class="btn btn-icon btn-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
  <span class="visually-hidden">Close</span>
</button>

html

<button type="button" class="btn btn-icon btn-no-outline btn-inverse" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/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 btn-inverse" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
  <span class="visually-hidden">Close</span>
</button>

<button type="button" class="btn btn-icon btn-secondary btn-inverse" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
  <span class="visually-hidden">Close</span>
</button>

<button type="button" class="btn btn-icon btn-secondary btn-inverse" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
  <span class="visually-hidden">Close</span>
</button>

Tooltips on close buttons have to be initialized. Tooltips can be initialized globally in the project.

CSS

Variables

Added in v5.2.1

As part of Boosted’s evolving CSS variables approach, close button 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.

scss/_close.scss

--#{$prefix}btn-close-color: #{$btn-close-color};
--#{$prefix}btn-close-bg: #{$btn-close-bg}; // Boosted mod: don't use escape-svg()
// Boosted mod: no --#{$prefix}btn-close-opacity
// Boosted mod: no --#{$prefix}btn-close-hover-opacity
// Boosted mod: no --#{$prefix}btn-close-focus-shadow
// Boosted mod: no --#{$prefix}btn-close-focus-opacity
// Boosted mod: no --#{$prefix}btn-close-disabled-opacity
// Boosted mod: no --#{$prefix}btn-close-white-filter
--#{$prefix}btn-close-padding: #{$btn-close-padding}; // Boosted mod
--#{$prefix}btn-close-border-width: #{$btn-close-border-width}; // 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.

scss/_close.scss

--#{$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:

scss/_variables.scss

$btn-close-width:               $spacer; // Boosted mod
$btn-close-height:              $btn-close-width;
$btn-close-padding:             var(--#{$prefix}icon-spacing, #{$btn-icon-padding-x}); // Boosted mod
$btn-close-border-width:        var(--#{$prefix}border-width); // Boosted mod
$btn-close-border-color:        transparent; // Boosted mod
$btn-close-color:               var(--#{$prefix}emphasis-color);
$btn-close-bg:                  var(--#{$prefix}close-icon); // Boosted mod
// Boosted mod
// fusv-disable
$btn-close-focus-shadow:        $btn-focus-box-shadow; // Deprecated in v5.3.0
// fusv-enable
// End mod

// 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:           1rem auto;
$btn-close-padding-sm:          subtract($btn-icon-padding-x, $spacer * .25);
// End mod

Variables for the dark close button:

scss/_variables.scss

$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

Close button

Example

Disabled state

Dark variant

Eco-design variant

Enable tooltip on close button

CSS

Variables

Sass variables