Close Buttons

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

Examples

Provide an option to dismiss or close a component with <CloseButton>.

<CloseButton className="btn-close"/>

Disabled state

Bootstrap adds relevant styling to a disabled close button to prevent user interactions.

Design

Code

<CloseButton className="btn-close" disabled />

White variant

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

Design

Code

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