Dialog

네이티브 <dialog /> 요소 기반의 헤드리스 모달 다이얼로그 컴포넌트. 외부 클릭 닫기 및 keep-mounted 모드를 지원합니다.

데모

다이얼로그 열기

Show Code

API 레퍼런스

Dialog

Prop	Type	Default	Description
children	ReactNode	-	Dialog 하위 컴포넌트 (Trigger, Content, Closer)
id	string	-	콘텐츠(dialog) 요소의 커스텀 id. 생략 시 자동 생성.
closeOutside	boolean	false	콘텐츠 영역 외부 클릭 시 다이얼로그 닫기
keepMounted	boolean	false	다이얼로그가 닫힌 상태에서도 DOM에 콘텐츠 유지
onOpen	() => void	-	다이얼로그가 열릴 때 호출
onClose	() => void	-	다이얼로그가 닫힐 때 호출

Dialog.Trigger

Prop	Type	Default	Description
children	ReactElement | ((props: { open }) => ReactNode)	-	클릭 가능한 요소 또는 open 핸들러를 받는 렌더 함수. aria-haspopup 자동 적용

Dialog.Content

Prop	Type	Default	Description
...props	Omit<ComponentPropsWithoutRef<"dialog">, "onClose">	-	네이티브 dialog 요소 속성 (onClose 제외). 자동 생성된 id 적용

Dialog.Closer

Prop	Type	Default	Description
children	ReactElement | ((props: { close }) => ReactNode)	-	클릭 가능한 요소 또는 close 핸들러를 받는 렌더 함수