컴포넌트 · 오버레이

Dialog · BottomSheet

현재 흐름을 잠시 멈추고 집중이 필요한 결정이나 입력을 받습니다. 데스크톱은 가운데 Modal, 모바일은 하단 BottomSheet가 기본입니다. Radix Dialog 기반으로 포커스 트랩 · ESC 닫기 · 스크롤 잠금을 지원합니다.

무엇을 쓸까

컴포넌트용도플랫폼
ConfirmDialog되돌릴 수 없는 작업 확인 (취소 · 삭제 · 확정)전체
Modal짧은 폼 · 상세 정보 (스크롤 1회 이내)Admin · Console · Sales · POS
BottomSheet옵션 선택 · 결제 수단 선택 · 짧은 폼App · QR · KIOSK
별도 페이지입력 항목 6개 이상 · 여러 단계전체

ConfirmDialog

제목에 질문, 본문에 결과(금액 · 대상), 버튼에 행동 그대로를 씁니다.

Modal

BottomSheet

결제 금액

12,800원

사용 규칙

이렇게 하세요

  • 닫기 수단 3가지: X 버튼 · ESC · 딤 클릭 (확인 다이얼로그는 딤 클릭 제외 가능)
  • 열릴 때 첫 입력 요소로 포커스, 닫히면 트리거로 복귀
  • 파괴적 확인 버튼은 danger

이렇게 하지 마세요

  • 모달 위에 모달
  • 페이지 진입 즉시 광고성 모달
  • ‘예 / 아니오’ 버튼

Props

PropTypeDefault설명
open / onOpenChangeboolean · (v) => void—제어 상태
triggerReactNode—열기 트리거 (asChild)
title · description*ReactNode—접근성 이름 · 설명
footerReactNode—버튼 영역 (Modal · BottomSheet)
Modal.size"sm" | "md" | "lg""md"360 · 480 · 720px
ConfirmDialog.destructiveboolean—확인 버튼 danger
BottomSheet.containedboolean—부모 영역 내부 렌더링 (미리보기용)