Components
Modal
Overview
모달은 사용자의 명시적 선택이 필요하거나 액션에 대한 확인이 필요할 때 사용합니다. 화면 중앙에 오버레이와 함께 표시되며, 액션을 완료하거나 닫기 전까지 다른 작업을 차단합니다.
Variants
ModalFooter의 actions 프리셋으로 버튼 구성과 균등 폭을 결정합니다. CTA 강조는 Button variant(기본 primary)로 맞춥니다.
- Single모달을 닫기만 하는 액션으로, 한 가지 액션만 전체 폭으로 표시됩니다. CTA는 Button(기본 primary).
- Dual동일 레벨의 액션 두 개가 균등한 폭으로 표시됩니다. 취소 secondary + 확인 primary를 권장합니다.
- Confirm진행을 유도하는 구성입니다. 취소 tertiary + 확인 primary를 권장합니다.
Single
변경사항을 저장할까요?
저장하지 않은 변경사항은 페이지를 벗어나면 사라집니다.
닫기
Dual
변경사항을 저장할까요?
저장하지 않은 변경사항은 페이지를 벗어나면 사라집니다.
취소저장
Confirm
변경사항을 저장할까요?
저장하지 않은 변경사항은 페이지를 벗어나면 사라집니다.
취소저장
Colors
CTA 기본은 Button primary입니다. 소비 앱에서는 각 버튼 className으로 bg·hover:bg·active:bg·text를 전달해 색을 덮어씁니다.
- Default primaryclassName 없이 Button만 쓰면 --surface-primary / hover·pressed 토큰이 적용됩니다.
- Custom className예: className="bg-emerald-500 text-white hover:bg-emerald-600 active:bg-emerald-700". variant 색 대신 전달한 클래스가 적용됩니다.
CTA는 Button 기본 primary입니다. 커스텀은 각 버튼 className에 bg- · hover:bg- · active:bg-를 함께 전달합니다.
Default primary
변경사항을 저장할까요?
저장하지 않은 변경사항은 페이지를 벗어나면 사라집니다.
취소저장
className="bg-emerald-500 …"
변경사항을 저장할까요?
저장하지 않은 변경사항은 페이지를 벗어나면 사라집니다.
취소저장
Props
자주 쓰는 props 조합입니다. 전체 API는 Docs를 참고하세요.
- open / onOpenChange열림 상태를 제어합니다. ESC·ModalClose로 닫히며, 오버레이 클릭으로는 닫히지 않습니다.
- ModalTitle제목이 필요 없으면 className="sr-only"로 숨겨 접근성을 유지합니다.
- ModalContent.className기본 400×400. w/h/max-* className으로 덮어 커스텀 팝업·콘텐츠 셸로 씁니다.
ModalTitle sr-only
className 크기
open / onOpenChange