Bootstrap Vue Close Button Component
A generic 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.
<CCloseButton/>
1
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/>
1
White variant
Change the default <CCloseButton> to be white with the white boolean property.
<CCloseButton white/>
<CCloseButton white disabled/>
1
2
2
API
CCloseButton
import { CCloseButton } from '@coreui/bootstrap-vue'
// or
import CCloseButton from '@coreui/bootstrap-vue/src/components/close-button/CCloseButton'
1
2
3
2
3
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| disabled | Toggle the disabled state for the component. | boolean | - | |
| white | Change the default color to white. | boolean | - |
Events
| Event name | Description | Properties |
|---|---|---|
| click | Event called when the user clicks on the component. |