Vue Close Button Component

Close Button

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

Available in Other JavaScript Frameworks

CoreUI Vue Close Button Component is also available for Angular, Bootstrap, and React. Explore framework-specific implementations below:

On this page

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.

vue

<template>
  <CCloseButton />
</template>

<script setup>
import { CCloseButton } from '@coreui/vue'
</script>

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.

vue

<template>
  <CCloseButton disabled />
</template>

<script setup>
import { CCloseButton } from '@coreui/vue'
</script>

Dark variant

Add dark boolean property to the <CCloseButton>, to invert the close button. This uses the filter property to invert the background-image without overriding its value.

vue

<template>
  <CCloseButton dark />
  <CCloseButton dark disabled />
</template>

<script setup>
import { CCloseButton } from '@coreui/vue'
</script>

API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

<CCloseButton />