CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedMigration
If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️ undefined Star🙏
  • undefined
  • undefined

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

API #

CCloseButton #

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

Props #

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

Events #

Event nameDescriptionProperties
clickEvent called when the user clicks on the component.
On this page
  • Example
  • Disabled state
  • White variant
  • API
    • CCloseButton
  • GitHub
  • Twitter
  • CoreUI (Vanilla)
  • CoreUI for Angular
  • CoreUI for React.js

CoreUI for Vue is Open Source UI Components Library for Vue.js.

Code licensed MIT , docs CC BY 3.0 .