Documentation

A generic close button for dismissing content like modals and alerts.

Examples

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.

<CloseButton />

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.

<CloseButton disabled />

White variant

Change the default dark color to white using variant="white".

<div className="bd-content bg-dark p-3">
    <CloseButton variant="white" />
    <CloseButton variant="white" disabled />
</div>