---
title: React Bootstrap Close Button Component
name: Close Button with Bootstrap Styling
description: Learn how to use the React Bootstrap Close Button component from CoreUI to add dismiss functionality to modals, alerts, and other UI elements with accessible and customizable styles.
route: /components/close-button/
bootstrap_component: true
---

## Using the React Bootstrap Close Button component

The React Bootstrap Close Button component provides a simple and accessible way to dismiss modals, alerts, or other interface elements. It's fully customizable and built with Bootstrap-compatible styles.

<ExampleSnippet className="theme-bootstrap" component="CloseButtonExample" componentName="React Bootstrap Close Button" />

## Disabled state

React Bootstrap Close Button can be disabled using the `disabled` prop. This changes its `opacity` and applies `pointer-events: none` and `user-select: none` to prevent interactions.

<ExampleSnippet className="theme-bootstrap" component="CloseButtonDisabledExample" componentName="React Bootstrap Close Button" />

## Dark variant

Use the `dark` prop to apply a dark version of the close button. This inverts the icon using the `filter` CSS property for better visibility on dark backgrounds.

<ExampleSnippet className="theme-bootstrap bg-dark" component="CloseButtonDarkExample" componentName="React Bootstrap Close Button" />

## API reference

Check the API documentation below for the full list of props available in the React Bootstrap Close Button component:

- [&lt;CCloseButton /&gt;](../api/#cclosebutton)
