Dialog

Displays a modal dialog prompt.

Usage

A component that presents modal content that requires user focus.

import { Dialog, Portal } from "@elemnts-ui/react";

<Dialog.Root>
  <Dialog.Trigger />
  <Portal>
    <Dialog.Backdrop />
    <Dialog.Positioner>
      <Dialog.Content>
        <Dialog.Title>Title</Dialog.Title>
        <Dialog.Description>Description</Dialog.Description>
        <Dialog.CloseTrigger />
      </Dialog.Content>
    </Dialog.Positioner>
  </Portal>
</Dialog.Root>;

Sizes

Adjust the dialog’s dimensions using the size prop.

Cover

Set size="cover" to expand the dialog to full-screen while leaving a small portion of the underlying page visible.

Fullscreen

Set the size prop to full to render the dialog in full-screen, occupying the entire viewport.

Placements

Set the placement prop to control where the dialog appears (top, center, bottom).

API Reference

DialogBackdrop

The backdrop component for the dialog.

Prop	Type	Default
asChild	`boolean`	`false`

DialogCloseTrigger

The close trigger component for the dialog.

Prop	Type	Default
asChild	`boolean`	`false`

DialogContent

The content component for the dialog.

Prop	Type	Default
asChild	`boolean`	`false`

DialogDescription

The description component for the dialog.

Prop	Type	Default
asChild	`boolean`	`false`

DialogPositioner

The positioner component for the dialog.

Prop	Type	Default
asChild	`boolean`	`false`

DialogRoot

The root component for the dialog.

Prop	Type	Default
aria-label	`string`	-
closeOnEscape	`boolean`	`true`
closeOnInteractOutside	`boolean`	`true`
defaultOpen	`boolean`	`false`
defaultTriggerValue	`string`	-
finalFocusEl	`() => MaybeElement`	-
hideMode	`HideMode`	`'display-none'`
immediate	`boolean`	-
initialFocusEl	`() => MaybeElement`	-
lazyMount	`boolean`	`false`
modal	`boolean`	`true`
onEscapeKeyDown	`(event: KeyboardEvent) => void`	-
onExitComplete	`VoidFunction`	-
onFocusOutside	`(event: FocusOutsideEvent) => void`	-
onInteractOutside	`(event: InteractOutsideEvent) => void`	-
onOpenChange	`(details: OpenChangeDetails) => void`	-
onPointerDownOutside	`(event: PointerDownOutsideEvent) => void`	-
onRequestDismiss	`(event: LayerDismissEvent) => void`	-
onTriggerValueChange	`(details: TriggerValueChangeDetails) => void`	-
open	`boolean`	-
persistentElements	`(() => Element	null)[]`
present	`boolean`	-
preventScroll	`boolean`	`true`
restoreFocus	`boolean`	-
role	`'dialog'	'alertdialog'`
skipAnimationOnMount	`boolean`	`false`
trapFocus	`boolean`	`true`
triggerValue	`string`	-
unmountOnExit	`boolean`	`false`

DialogRootProvider

The root provider component for the dialog.

Prop	Type	Default
value	`UseDialogReturn`	required
asChild	`boolean`	`false`
hideMode	`HideMode`	`'display-none'`
immediate	`boolean`	-
lazyMount	`boolean`	`false`
onExitComplete	`VoidFunction`	-
present	`boolean`	-
skipAnimationOnMount	`boolean`	`false`
unmountOnExit	`boolean`	`false`

DialogTitle

The title component for the dialog.

Prop	Type	Default
asChild	`boolean`	`false`

DialogTrigger

The trigger component for the dialog.

Prop	Type	Default
asChild	`boolean`	`false`
value	`string`	-

DialogRoot

The root element of the dialog.

Prop	Type	Default
closeOnEscape	`boolean`	`false`
closeOnInteractOutside	`boolean`	`false`
defaultOpen	`boolean`	`false`
defaultTriggerValue	`string`	`undefined`
finalFocusEl	`() => MaybeElement`	`undefined`
hideMode	`HideMode`	`undefined`
immediate	`boolean`	`false`
initialFocusEl	`() => MaybeElement`	`undefined`
modal	`boolean`	`false`
onEscapeKeyDown	`(event: KeyboardEvent) => void`	`undefined`
onExitComplete	`VoidFunction`	`undefined`
onFocusOutside	`(event: FocusOutsideEvent) => void`	`undefined`
onInteractOutside	`(event: InteractOutsideEvent) => void`	`undefined`
onOpenChange	`(details: OpenChangeDetails) => void`	`undefined`
onPointerDownOutside	`(event: PointerDownOutsideEvent) => void`	`undefined`
onRequestDismiss	`(event: LayerDismissEvent) => void`	`undefined`
onTriggerValueChange	`(details: TriggerValueChangeDetails) => void`	`undefined`
open	`boolean`	`false`
persistentElements	`(() => Element \| null)[]`	`undefined`
present	`boolean`	`false`
preventScroll	`boolean`	`false`
restoreFocus	`boolean`	`false`
role	`'dialog' \| 'alertdialog'`	`undefined`
skipAnimationOnMount	`boolean`	`false`
trapFocus	`boolean`	`false`
triggerValue	`string`	`undefined`