모달

모달은 대화창의 한 종류로 기본 창에 종속된 요소이다.

사용 지침

확인이 필요한 결정·중요한 폼 입력처럼 컨텍스트를 분리해야 할 때만 신중히 사용하고, 포커스 트랩과 ESC 닫기, 배경 오버레이 클릭 정책을 일관되게 적용합니다.

examples/modal/ModalDefault.tsx

import { Button } from "@/components/ui/dynamic/button"
import {
  ModalRoot,

examples/modal/ModalAsChildTrigger.tsx

import { Button } from "@/components/ui/dynamic/button"
import {
  ModalRoot,

examples/modal/ModalBottomSheet.tsx

import { Button } from "@/components/ui/dynamic/button"
import {
  ModalRoot,

examples/modal/ModalLongContentInitialBodyFocus.tsx

import { Button } from "@/components/ui/dynamic/button"
import {
  ModalRoot,

examples/modal/ModalSizeLg.tsx

import { Button } from "@/components/ui/dynamic/button"
import {
  ModalRoot,

examples/modal/ModalSizeMd.tsx

import { Button } from "@/components/ui/dynamic/button"
import {
  ModalRoot,

examples/modal/ModalSizeSm.tsx

import { Button } from "@/components/ui/dynamic/button"
import {
  ModalRoot,

examples/modal/ModalUsePortal.tsx

import { Button } from "@/components/ui/dynamic/button"
import {
  ModalRoot,

이름	타입	기본값	설명
closeOnEsc	boolean	true	Pressing Escape closes the dialog (default: true). Implemented via Radix default.
closeOnOverlayClick	boolean	true	—
defaultOpen	boolean	—	—
onOpenChange	((open: boolean) => void)	—	—
open	boolean	—	—
portalContainer	string \| HTMLElement	—	@deprecated Portal container is now document.body. Ignored.
size	enum	md	—
usePortal	boolean	true	@deprecated Portal is now managed by the radix Dialog layer. Ignored.
variant	enum	default	—