모달 Modal

모달은 대화창의 한 종류로 기본 창에 종속된 요소이다. 기본 창과 겹쳐져 가장 상단에 표시되며, 이때 기본 창은 비활성 상태로 전환되어 상호작용이 불가능하므로 사용자는 모달에서의 단일한 과업 또는 메시지에 집중할 수 있다.

KRDS 가이드

기본

import { Modal } from '@krds.ui/react'

export default function ModalDemo() {
  return (
    <Modal>
      <Modal.Trigger>신청 확인</Modal.Trigger>
      {/* 대화상자 이름은 aria-labelledby로 제목과 직접 연결한다 (README 알려진 문제) */}
      <Modal.Content aria-labelledby="apply-confirm-title">
        <Modal.Header>
          <Modal.Title id="apply-confirm-title">신청 확인</Modal.Title>
        </Modal.Header>
        <Modal.Body>입력한 내용으로 신청할까요?</Modal.Body>
        <Modal.Footer>
          <Modal.Close>닫기</Modal.Close>
        </Modal.Footer>
      </Modal.Content>
    </Modal>
  )
}

Modal

Props

이름	타입	기본값	설명
open	boolean	-
defaultOpen	boolean	false
onOpenChange	((open: boolean) => void)	-
size	ModalSize	lg
variant	ModalVariant	default
closeOnEsc	boolean	false
closeOnOverlayClick	boolean	false
usePortal	boolean	false
portalContainer	string | HTMLElement	-