Next.js Bootstrap Close Button

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.

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. A dismissible alert adds its own.

ExampleCopy Anchor Link

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

PropsCopy Anchor Link

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 backgroundCopy Anchor Link

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.

<div className="bg-dark p-3 rounded">
  <CloseButton white onClick={close} />
</div>

AccessibilityCopy Anchor Link

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

RelatedCopy Anchor Link

• React Bootstrap close button: the same component in AdminKit for React (Vite)
• Bootstrap 5 close button: the close button of the HTML version
• Modal: a dialog with a close button in its header
• Alerts demo: dismissible alerts with a close button