Close button
A generic close button for dismissing components like modals and alerts.
Example #
A generic close button can be created using the .btn-close class. These buttons can be used for dismissing components like modals and alerts. Close buttons can also be disabled by adding the disabled attribute.
HTML
<!-- Close button -->
<button type="button" class="btn-close" aria-label="Close"></button>
<!-- Disabled close button -->
<button type="button" class="btn-close" disabled aria-label="Close"></button>
Accessibility
Please note, close buttons should have text for screen readers to make them accessible. This can be done with thearia-label attribute for example.
Color scheme #
Add data-bs-theme="dark" or data-bs-theme="light" directly to the .btn-close to create a light or dark variant that ignores the global color mode. Please note, the attribute should be added to the close button for best results, not on a parent element.
HTML
<!-- Light close button for dark background -->
<div style="background-color: var(--bs-sable);">
<button type="button" class="btn-close" aria-label="Close" data-bs-theme="dark"></button>
</div>
<!-- Dark close button for light background -->
<div style="background-color: var(--bs-lightgray);">
<button type="button" class="btn-close" aria-label="Close" data-bs-theme="light"></button>
</div>
Local color mode
We generally do not recommend the local usage of color modes in Halfmoon, as they can cause some unexpected issues. However, this is one of two exceptions (other one being navbar togglers) where it is encouraged, because we have overridden the CSS to make sure they always work properly. Please note once again, you should add the attribute directly to the.btn-close.
Help us grow
Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.
You can email us directly if you have any queries. We are always happy to answer.
Subscribe for updates
We will notify you when the framework gets a substantial update. No spam ever.
Follow us on Twitter so that you can stay updated that way.