Close Button

import { CloseButtonDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.CloseButton);

Usage

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

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.

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>
    </>
  );
}