Dialog
Dialog는 페이지 위에 모달 형태로 정보를 표시하거나 작업을 수행하도록 하는 컴포넌트입니다.Property
Size
Dialog의 크기를 설정합니다.
Modal Behavior
Dialog의 모달 동작을 설정합니다.
Examples
Custom Usage
Dialog 컴포넌트의 다양한 구성 패턴입니다.
Custom Overlay
Dialog.PortalPrimitive, Dialog.OverlayPrimitive, Dialog.PopupPrimitive를 직접 조합하면 오버레이 스타일 등 레이어 구조를 제어할 수 있습니다.
Props Table
Dialog.Root
Dialog 복합 컴포넌트의 루트. 사용자가 작업이나 정보 하나에 집중하게 하는 모달 창입니다. 열림 상태를 관리하고 팝업 크기를 설정합니다. 자체 HTML 요소를 렌더링하지 않습니다.
| Prop | Default | Type |
|---|---|---|
size? | md | mdlgxl |
defaultOpen? | false | boolean |
onOpenChange? | - | function |
open? | - | boolean |
closeOnClickOverlay? | true | boolean |
actionsRef? | - | React.RefObject<Dialog.Root.Actions | null> |
children? | - | ReactNodefunction |
defaultTriggerId? | - | stringnull |
handle? | - | DialogHandle<unknown> |
modal? | true | booleantrap-focus |
onOpenChangeComplete? | - | function |
triggerId? | - | stringnull |
Dialog.Popup
Dialog.PortalPrimitive, Dialog.OverlayPrimitive, Dialog.PopupPrimitive를 하나의 파트로 합칩니다. portalElement 또는 overlayElement로 포털이나 오버레이를 대체할 수 있습니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
overlayElement? | - | ReactElement<DialogOverlayPrimitive.Props> |
portalElement? | - | ReactElement<DialogPortalPrimitive.Props> |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
initialFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |
Dialog.PortalPrimitive
일반 DOM 계층 밖에 Dialog 콘텐츠를 렌더링하는 포털 컨테이너. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
container? | - | HTMLElementShadowRootReact.RefObject<HTMLElement | ShadowRoot | null>null |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
Dialog.OverlayPrimitive
Dialog 팝업 뒤에 렌더링되는 반투명 배경. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
forceRender? | false | boolean |
render? | - | ReactElementfunction |
Dialog.PopupPrimitive
화면 중앙에 놓이는 Dialog 패널 자체. 크기는 Dialog.Root의 size prop으로 제어합니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
initialFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |
Dialog.Trigger
활성화하면 Dialog를 여는 버튼. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
handle? | - | DialogHandle<unknown> |
id? | - | string |
nativeButton? | true | boolean |
payload? | - | unknown |
render? | - | ReactElementfunction |
Dialog.Close
활성화하면 Dialog를 닫는 버튼. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |
Dialog.Title
보조기술에서 Dialog의 레이블 역할을 하는 제목 요소. <h2> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Dialog.Description
Dialog의 보조 텍스트를 담는 문단으로, 보조기술에서 Dialog 패널과 연결됩니다. <p> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Dialog.Header
Dialog의 상단 영역. 보통 제목과 닫기 버튼을 담습니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Dialog.Body
Dialog의 스크롤 가능한 주요 콘텐츠 영역. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Dialog.Footer
Dialog의 하단 영역. 보통 액션 버튼을 담습니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |