CloseButtonpolymorphic

Usage

CloseButton is a premade ActionIcon with close icon. Component accepts the same props as ActionIcon with additional iconSize prop to control icon width and height:

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

function Demo() {
  return (
    <Group position="center">
      <CloseButton aria-label="Close modal" />
      <CloseButton title="Close popover" size="xl" iconSize={20} />
    </Group>
  );
}

Accessibility

CloseButton does not have an associated label, set title or aria-label props to make it visible for screen readers:

<CloseButton /> // -> not visible to screen reader
<CloseButton title="Settings" /> // -> ok
<CloseButton aria-label="Settings" /> // -> ok