CloseButton

CloseButton (닫기 버튼)

CloseButton 컴포넌트는 X(닫기) 아이콘이 들어 있는 버튼을 렌더링하는 컴포넌트예요. Drawer나 Modal 같은 다른 Mantine 컴포넌트 안에서 닫기 버튼으로 자주 사용돼요.

출처: 문서

본문

CloseButton은 안에 X 아이콘이 들어 있는 버튼을 렌더링해요. Drawer나 Modal 같은 다른 Mantine 컴포넌트에서도 사용돼요.

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

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

아이콘 바꾸기

icon prop에 원하는 React 노드를 전달하면 아이콘을 바꿀 수 있어요. CloseButton을 다른 컴포넌트의 일부로 사용할 때(예: Drawer나 Modal) 유용해요. 주의할 점은 icon prop을 사용하면 iconSize prop은 무시되므로, 아이콘 크기를 직접 설정해야 해요.

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

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

접근성 (Accessibility)

스크린 리더에서 CloseButton을 접근 가능하게 만들려면 aria-label을 설정하거나 VisuallyHidden 컴포넌트를 사용해야 해요.

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

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

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

더 알아보기 (Learn more)

• Drawer — 측면에서 열리는 패널 컴포넌트
• Modal — 중앙에 열리는 모달 컴포넌트
• VisuallyHidden — 스크린 리더 접근성용 컴포넌트