Button with close icon



CloseButton renders a button with 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 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 icon prop, iconSize prop is ignored – you will have to set icon size manually.

import { IconXboxX } from '@tabler/icons-react';
import { CloseButton } from '@mantine/core';

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


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

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

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

        <VisuallyHidden>Close modal</VisuallyHidden>