Dialog
Dialog는 페이지 위에 모달 형태로 정보를 표시하거나 작업을 수행하도록 하는 컴포넌트입니다.Property
Size
Dialog의 크기를 설정합니다.
Modal Behavior
Dialog의 모달 동작을 설정합니다.
Examples
Custom Usage
Dialog 컴포넌트의 다양한 구성 패턴입니다.
Custom Overlay
Dialog.PortalPrimitive, Dialog.OverlayPrimitive, Dialog.PopupPrimitive를 직접 조합하면 오버레이 스타일 등 레이어 구조를 제어할 수 있습니다.
Props Table
Dialog.Root
Root of the Dialog compound component, a modal window that focuses the user on a task or a piece of information. Manages the open state and sets the popup size. Doesn't render its own HTML element.
| 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
Combines Dialog.PortalPrimitive, Dialog.OverlayPrimitive, and Dialog.PopupPrimitive into a single part. Use portalElement or overlayElement to replace the portal or overlay. Renders a <div> element.
| 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
Portal container that renders dialog content outside the normal DOM hierarchy. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
container? | - | HTMLElementShadowRootReact.RefObject<HTMLElement | ShadowRoot | null>null |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
Dialog.OverlayPrimitive
Semi-transparent backdrop rendered behind the dialog popup. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
forceRender? | false | boolean |
render? | - | ReactElementfunction |
Dialog.PopupPrimitive
The dialog panel itself, centered on screen. Size is controlled by the size prop on Dialog.Root. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
initialFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |
Dialog.Trigger
Button that opens the dialog when activated. Renders a <button> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
handle? | - | DialogHandle<unknown> |
id? | - | string |
nativeButton? | true | boolean |
payload? | - | unknown |
render? | - | ReactElementfunction |
Dialog.Close
Button that closes the dialog when activated. Renders a <button> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |
Dialog.Title
Heading element that labels the dialog for assistive technologies. Renders an <h2> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Dialog.Description
Paragraph that provides supplementary text for the dialog, linked to the dialog panel for assistive technologies. Renders a <p> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Dialog.Header
Top section of the dialog, typically containing the title and a close button. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Dialog.Body
Scrollable main content area of the dialog. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Dialog.Footer
Bottom section of the dialog, typically containing action buttons. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |