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.


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.


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



import { CCloseButton } from '@coreui/vue'
// or
import CCloseButton from '@coreui/vue/src/components/close-button/CCloseButton'


Prop nameDescriptionTypeValuesDefault
disabledToggle the disabled state for the component.boolean--
whiteChange the default color to white.boolean--


Event nameDescriptionProperties
clickEvent called when the user clicks on the component.