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

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

Deprecated in v5.3.3

Heads up! Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode.

Add data-bs-theme="dark" to the .btn-close or any ancestor element to enable a component-specific color mode. Learn more about our color modes.

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

Enable tooltip on close 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

Sass variables

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:        var(--#{$prefix}primary);
$btn-close-active-border-color: var(--#{$prefix}border-color-subtle);
$btn-close-disabled-color:      var(--#{$prefix}disabled-color);

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