Bootstrap React Close Button

A generic Bootstrap React Close Button component for dismissing content like modals and alerts.

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.

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 />

API#

CCloseButton#

1import { CCloseButton } from '@coreui/bootstrap-react'
2// or
3import CCloseButton from '@coreui/bootstrap-react/src/components/close-button/CCloseButton'

Property	Description	Type	Default
className	A string of all className you want applied to the base component.	`string`	-
disabled	Toggle the disabled state for the component.	`boolean`	-
white	Change the default color to white.	`boolean`	-