Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Close Button
A close button is an essential UI component that provides users with a clear and consistent way to dismiss, hide, or remove content from view. Built with accessibility in mind, it includes proper ARIA attributes and supports keyboard navigation, making it suitable for modals, alerts, notifications, and other dismissible elements.
Basic Example
The standard close button uses the btn-close class to create a visually distinct
"×" symbol. It includes the aria-label="Close" attribute to ensure screen readers
properly announce its purpose. The button is styled to be easily recognizable while maintaining
a clean, minimal appearance.
Disabled State
Add the disabled attribute to create an inactive close button. The button will
appear visually muted and won't respond to user interactions. Include
aria-disabled="true" to properly communicate the disabled state to assistive
technologies.