---
title: React Close Button Component
name: Close Button
description: A generic close button component for dismissing content like modals and alerts.
menu: Components
route: /components/close-button
other_frameworks: close-button
---

import { CCloseButton } from '@coreui/react/src/index'

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

```jsx preview
<CCloseButton />
```

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

```jsx preview
<CCloseButton disabled />
```

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

```jsx preview className="bg-dark border-0"
<CCloseButton dark />
<CCloseButton dark disabled />
```

## API

### CCloseButton

`markdown:CCloseButton.api.mdx`
