Flame

Dialog

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

데모

API 레퍼런스

Dialog

PropTypeDefaultDescription
childrenReactNode-Dialog 하위 컴포넌트 (Trigger, Content, Closer)
closeOutsidebooleanfalse콘텐츠 영역 외부 클릭 시 다이얼로그 닫기
keepMountedbooleanfalse다이얼로그가 닫힌 상태에서도 DOM에 콘텐츠 유지

Dialog.Trigger

PropTypeDefaultDescription
childrenReactElement | ((props: { open }) => ReactNode)-클릭 가능한 요소 또는 open 핸들러를 받는 렌더 함수. aria-controls 자동 적용

Dialog.Content

PropTypeDefaultDescription
...propsComponentPropsWithoutRef<"dialog">-모든 네이티브 dialog 요소 속성. 자동 생성된 id 적용

Dialog.Closer

PropTypeDefaultDescription
childrenReactElement | ((props: { close }) => ReactNode)-클릭 가능한 요소 또는 close 핸들러를 받는 렌더 함수