Close button

Example#

Provide an option to dismiss or close a component with .btn-close. The icon is drawn in currentColor, so it follows the text color of its parent. Be sure to include text for screen readers, as we’ve done with aria-label.

<button type="button" class="btn-close" aria-label="Close"></button>

Disabled state#

Disabled close buttons change their opacity. We’ve also applied pointer-events: none to prevent hover and active states from triggering.

<button type="button" class="btn-close" disabled aria-label="Close"></button>

Dark variant#

Add data-bs-theme="dark" to the .btn-close, or to its parent element, to get a close button for dark surfaces.

<div data-bs-theme="dark">
  <button type="button" class="btn-close" aria-label="Close"></button>
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
</div>

Bootstrap's deprecated .btn-close-white still works as well; it simply sets the color to white.