CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedCustomize
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedTemplates
  • undefinedMigration
  • undefined
  • undefined
  • undefined
undefinedDownloadundefinedHire Us Get CoreUI PRO

Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Hire Us! We create stunning designs, high-conversion landing pages, functional mobile apps and reliable web services – everything you need to offer your products or services online and always stay a tap away from your customers.
  • Give us a star ⭐️ on Github.

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.

  • Angular Close Button
  • Bootstrap Close Button
  • React Close Button

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.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.