React Close Button Component

Close Button

New Year sale. Skyrocket your business in 2025!

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order!
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.

Get offer!

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

Other Frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

On this page

Example#

Provide an option to dismiss or close a component with <CCloseButton>. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default background-image.

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.

Dark variant#

Add dark boolean property to the <CCloseButton>, to invert the close button. This uses the filter property to invert the background-image without overriding its value.

API#

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

<CCloseButton />