Vue Bootstrap Close Button Component

Close Button with Bootstrap Styling

Bootstrap 5 components designed for Vue.js

This component is part of the CoreUI for Vue.js UI components library, which offers all Bootstrap components designed to work seamlessly with Vue.js.

If you want to use Bootstrap 5 in a Vue.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.

Learn how to use CoreUI’s Vue Close Button component with Bootstrap styles for flexible, framework-consistent UI.

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>