CloseButton

ActionIcon with close icon

Import

Polymorphic

Polymorphic component

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

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

Size

Variant

Transparent

Subtle

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

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

Accessibility

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" />

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

Button

CopyButton

Welcome to Mantine, React components library that you always wished for

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community Follow Mantine on Twitter