React Close Button Component

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


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.

1<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.

1<CCloseButton disabled />

White variant#

Change the default <CCloseButton> to be white with the white boolean property.

1<CCloseButton white />
2<CCloseButton white disabled />



1import { CCloseButton } from '@coreui/react'
2// or
3import CCloseButton from '@coreui/react/src/components/close-button/CCloseButton'
classNameA string of all className you want applied to the base component.string-
disabledToggle the disabled state for the component.boolean-
whiteChange the default color to white.boolean-