Are you ready for Cyber Monday Week Deals?
Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.
React Close Button Component
Close Button
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.
<CCloseButton />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.
<CCloseButton disabled />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.
<CCloseButton dark /><CCloseButton dark disabled />API#
CCloseButton#
import { CCloseButton } from '@coreui/react'// orimport CCloseButton from '@coreui/react/src/components/close-button/CCloseButton'| Property | Description | Type | Default |
|---|---|---|---|
| className | A string of all className you want applied to the base component. | string | - |
| dark | Invert the default color. | boolean | - |
| disabled | Toggle the disabled state for the component. | boolean | - |
| white Deprecated 5.0.0+ | Change the default color to white. | boolean | - |