React Bootstrap Close Button

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.

A dismissible alert adds one itself. In a modal or an offcanvas header, you add it yourself, with an onClick that closes the dialog.

ExampleCopy Anchor Link

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

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

PropsCopy Anchor Link

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

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.

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

AccessibilityCopy Anchor Link

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

RelatedCopy Anchor Link

• Next.js Bootstrap close button: the same component in AdminKit for Next.js
• 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