Vue Close Button Component

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

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.