# Next.js Bootstrap Close Button

A Next.js Bootstrap close button: Bootstrap's .btn-close with an aria-label, for the modals, offcanvas sheets and alerts of your App Router pages.

`CloseButton` is the small X that closes a modal, an offcanvas panel or an alert. It renders Bootstrap's `.btn-close` with `type="button"` and `aria-label="Close"` already set. It is in the free and PRO versions of [AdminKit for Next.js](/nextjs/).

`CloseButton` holds no state, so its file has no `"use client"`, and it works in both server and client components. A close button that does something is another matter. Its `onClick` is a function, and a server component cannot pass functions to the browser. So that button lives in a client component, next to the state it changes, as in a [modal](/nextjs/docs/components/modal/). A dismissible [alert](/nextjs/docs/components/alerts/) adds its own.

## 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 title="src/components/close-buttons.tsx"
"use client";

import { useState } from "react";
import { CloseButton } from "@/components/bootstrap/close-button";

export function CloseButtons() {
  const [open, setOpen] = useState(true);

  if (!open) {
    return null;
  }

  return (
    <>
      <CloseButton onClick={() => setOpen(false)} />
      <CloseButton disabled />
    </>
  );
}
```

Here a click removes the buttons. In a real component, `onClick` usually sets the `show` of a modal or an offcanvas to false.

## Props

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

The other props, such as `onClick`, `disabled`, `className` and `aria-label`, go to the `<button>`. `disabled` fades it and stops clicks. The component is in `src/components/bootstrap/close-button.tsx`.

## On a dark background

Use `white` on a dark surface, where the default icon is hard to see. The toasts of AdminKit PRO set 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

- `aria-label="Close"` gives the icon-only button its name. With several close buttons close together, pass a clearer one, such as `aria-label="Close filters"`.
- It is a native `<button>`: focusable, and Enter and Space press it.

## Related

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

---

Canonical HTML page: https://adminkit.io/nextjs/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