# 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 `background-image`. **Be sure to include text for screen readers**, as we've done with `aria-label`.

```html
<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` and `user-select: none` to preventing hover and active states from triggering.

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

## Dark variant

<small class="d-inline-flex mb-3 px-2 py-1 fw-semibold text-warning-emphasis bg-warning-subtle border border-warning-subtle rounded-2">Deprecated in v5.0.0</small>



**Heads up!** As of v5.0.0, the `.btn-close-white` class is deprecated. Instead, use `data-coreui-theme="dark"` to change the color mode of the close button.


Add `data-coreui-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value.

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

## Customizing

### SASS variables

```scss
$btn-close-width:            1em;
$btn-close-height:           $btn-close-width;
$btn-close-padding-x:        .25em;
$btn-close-padding-y:        $btn-close-padding-x;
$btn-close-color:            $black;
$btn-close-bg:               url(&#34;data:image/svg&#43;xml,&lt;svg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 16 16&#39; fill=&#39;#{$btn-close-color}&#39;&gt;&lt;path d=&#39;M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414&#39;/&gt;&lt;/svg&gt;&#34;);
$btn-close-focus-shadow:     $focus-ring-box-shadow;
$btn-close-opacity:          .5;
$btn-close-hover-opacity:    .75;
$btn-close-focus-opacity:    1;
$btn-close-disabled-opacity: .25;
$btn-close-filter:           null;
$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%); // Deprecated in v5.3.2

```

<h2 id="coreui-vs-bootstrap">CoreUI vs Bootstrap <a class="anchor-link" href="#coreui-vs-bootstrap" aria-label="Link to this section: CoreUI vs Bootstrap"></a></h2>
<p>While this Close Button component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development.</p>
<p><strong>What sets CoreUI apart from Bootstrap?</strong></p>
<ul>
<li>✅ <strong>Fully compatible with Bootstrap</strong> – Built directly on Bootstrap, all classes and behaviors work as expected.</li>
<li>🧠 <strong>Framework-native versions</strong> – CoreUI provides dedicated libraries for <a href="https://coreui.io/react/">React.js</a>, <a href="https://coreui.io/vue/">Vue.js</a>, and <a href="https://coreui.io/angular/">Angular</a>, unlike Bootstrap which relies on third-party plugins for JavaScript frameworks.</li>
<li>👨‍💻 <strong>Maintained by a full-time team</strong> – CoreUI is developed as a professional product, not a volunteer-driven project.</li>
<li>📦 <strong>More built-in components</strong> – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc.</li>
<li>🛠️ <strong>Sass Modules support today</strong> – CoreUI already supports Sass Modules, which are planned for Bootstrap 6.</li>
<li>🌍 <strong>Better LTR/RTL support</strong> – Uses modern CSS logical properties for seamless bidirectional layout support.</li>
<li>🔒 <strong>LTS (Long-Term Support)</strong> – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free.</li>
</ul>
<p>Whether you&rsquo;re building internal tools, dashboards, or SaaS platforms — CoreUI combines the familiarity of Bootstrap with a more powerful, scalable, and production-ready ecosystem.</p>
<p>👉 <a href="https://coreui.io/bootstrap/">Explore CoreUI Bootstrap Components</a><br>
👉 <a href="https://coreui.io/bootstrap/docs/getting-started/introduction/#coreui-vs-bootstrap">Compare CoreUI vs Bootstrap</a></p>