# 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`.

```html
<template>
  <CCloseButton />
</template>

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

## 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.

```html
<template>
  <CCloseButton disabled />
</template>

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

## 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.

```html
<template>
  <CCloseButton dark />
  <CCloseButton dark disabled />
</template>

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