# React Bootstrap Close Button

The React Bootstrap close button of AdminKit: a .btn-close button with an accessible label, used by alerts, modals, offcanvas sheets and toasts.

Every dialog, side panel and dismissible message needs a way out. `CloseButton` is that small X button: Bootstrap's `.btn-close` as a React component, with `type="button"` and `aria-label="Close"` already set. It is in the free and PRO versions of [AdminKit for React](/react/).

A dismissible [alert](/react/docs/components/alerts/) adds one itself. In a modal or an offcanvas header, you add it yourself, with an `onClick` that closes the dialog.

## Example

```html
<button type="button" class="btn-close" aria-label="Close"></button>
<button type="button" class="btn-close" disabled aria-label="Close"></button>
```
```tsx code
import { CloseButton } from "@/components/bootstrap/close-button";

export function CloseButtons({ onClose }: { onClose: () => void }) {
  return (
    <>
      <CloseButton onClick={onClose} />
      <CloseButton disabled />
    </>
  );
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `white` | `boolean` | | Adds `.btn-close-white`, a light icon for dark backgrounds |

Other props, such as `onClick`, `disabled`, `className` and `aria-label`, go to the `<button>`. A disabled close button is faded and ignores clicks. The component is in `src/components/bootstrap/close-button.tsx`.

## On a dark background

On a dark surface, the default icon is hard to see. `white` turns the icon light. The toasts of AdminKit PRO use it when their text is light.

```html
<div class="bg-dark p-3 rounded">
  <button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
</div>
```
```tsx code
<div className="bg-dark p-3 rounded">
  <CloseButton white onClick={close} />
</div>
```

## Accessibility

- The button has no visible text, so `aria-label="Close"` names it. Pass a more specific label when several close buttons are near each other, such as `aria-label="Close filters"`.
- It is a real `<button>`: it takes the focus, and Enter and Space activate it.

## Related

- [Next.js Bootstrap close button](/nextjs/docs/components/close-button/): the same component in AdminKit for Next.js
- [Bootstrap 5 close button](/bootstrap/docs/components/close-button/): the close button of the HTML version
- [Modal](/react/docs/components/modal/): a dialog with a close button in its header
- [Alerts demo](https://react-demo.adminkit.io/ui-alerts): dismissible alerts with a close button

---

Canonical HTML page: https://adminkit.io/react/docs/components/close-button/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io