Vue Close Button Component
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 React components. To learn more please visit the following pages.
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/>
White variant
Change the default <CCloseButton>
to be white with the white
boolean property.
<CCloseButton white/>
<CCloseButton white disabled/>
API
CCloseButton
import { CCloseButton } from '@coreui/vue'
// or
import CCloseButton from '@coreui/vue/src/components/close-button/CCloseButton'
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. |