모달

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

사용 지침

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

examples/modal/ModalDefault.tsx

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

examples/modal/ModalAsChildTrigger.tsx

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

examples/modal/ModalBottomSheet.tsx

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

examples/modal/ModalLongContentInitialBodyFocus.tsx

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

examples/modal/ModalSizeLg.tsx

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

examples/modal/ModalSizeMd.tsx

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

examples/modal/ModalSizeSm.tsx

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

examples/modal/ModalUsePortal.tsx

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