CloseButton

Usage

CloseButton renders a button with an X icon inside. It is used in other Mantine components like Drawer or Modal.

import { CloseButton } from '@mantine/core';

function Demo() {
  return <CloseButton />;
}

Change icon

You can change the icon by passing any react node to the icon prop. It is useful when CloseButton is used as a part of other components, for example, in Drawer or Modal. Note that if you use the icon prop, the iconSize prop is ignored – you will have to set the icon size manually.

import { XCircleIcon } from '@phosphor-icons/react';
import { CloseButton } from '@mantine/core';

function Demo() {
  return <CloseButton icon={<XCircleIcon size={18} />} />;
}

Accessibility

To make the CloseButton accessible for screen readers, you need to either set aria-label or use the VisuallyHidden component:

import { CloseButton, VisuallyHidden } from '@mantine/core';

function Demo() {
  return (
    <>
      <CloseButton aria-label="Close modal" />

      <CloseButton>
        <VisuallyHidden>Close modal</VisuallyHidden>
      </CloseButton>
    </>
  );
}