Dialog

React

Usage

import { Dialog } from '@zalify-ui/react'

<Dialog.Root>
  <Dialog.Trigger />
  <Dialog.Backdrop />
  <Dialog.Positioner>
    <Dialog.Content>
      <Dialog.CloseTrigger />
      <Dialog.Header>
        <Dialog.Title />
        <Dialog.Description />
      </Dialog.Header>
      <Dialog.Body />
      <Dialog.Footer>
        <Dialog.ActionTrigger />
      </Dialog.Footer>
    </Dialog.Content>
  </Dialog.Positioner>
</Dialog.Root>

Examples

Use the size prop to change the size of the dialog component.

React

Cover

Use the size="cover" prop to make the dialog component cover the entire screen while revealing a small portion of the page behind.

React

Fullscreen

Use the size="full" prop to make the dialog component take up the entire screen.

React

Responsive Size

Use responsive values for the size prop to make the dialog adapt to different screen sizes. We recommend using exact breakpoints values instead of using a base to ensure styles are properly contained.

React

Placements

Use the placement prop to change the placement of the dialog component.

React

Controlled

Use the open and onOpenChange prop to control the visibility of the dialog component.

'use client'
import { Portal } from '@ark-ui/react/portal'
import { useState } from 'react'
import { Button, CloseButton, Dialog } from '@zalify-ui/react'

export const App = () => {
  const [open, setOpen] = useState(false)

  return (
    <Dialog.Root open={open} onOpenChange={(e) => setOpen(e.open)}>
      <Dialog.Trigger asChild>
        <Button variant="outline">Open Dialog</Button>
      </Dialog.Trigger>
      <Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content>
            <Dialog.Header>
              <Dialog.Title>Title</Dialog.Title>
              <Dialog.Description>Description</Dialog.Description>
            </Dialog.Header>
            <Dialog.Body>{/* Content */}</Dialog.Body>
            <Dialog.Footer>
              <Dialog.ActionTrigger>
                <Button variant="outline">Cancel</Button>
              </Dialog.ActionTrigger>
              <Dialog.ActionTrigger>
                <Button>Save</Button>
              </Dialog.ActionTrigger>
            </Dialog.Footer>
            <Dialog.CloseTrigger asChild>
              <CloseButton />
            </Dialog.CloseTrigger>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>
  )
}

Nested Dialogs

You can nest dialogs by using the Dialog.Root component inside another Dialog.Root component.

React

Initial Focus

Use the initialFocusEl prop to set the initial focus of the dialog component.

React

Inside Scroll

Use the scrollBehavior=inside prop to change the scroll behavior of the dialog when its content overflows.

React

Outside Scroll

Use the scrollBehavior=outside prop to change the scroll behavior of the dialog when its content overflows.

React

Motion Preset

Use the motionPreset prop to change the animation of the dialog component.

React

Alert Dialog

Set the role: "alertdialog" prop to change the dialog component to an alert dialog.

React

We don't recommend using a non-modal dialog due to the accessibility concerns they present. In event you need it, here's what you can do:

set the modal prop to false
set pointerEvents to none on the Dialog.Positioner component
(optional)set the closeOnInteractOutside prop to false

React

Props

Root

Prop	Default	Type
`motionPreset`	`'scale'`	`'scale' \| 'slide-in-bottom' \| 'slide-in-top' \| 'slide-in-left' \| 'slide-in-right' \| 'none'`
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'cover' \| 'full'`
`placement`	`'center'`	`'center' \| 'top' \| 'bottom'`
`scrollBehavior`	`'outside'`	`'inside' \| 'outside'`
`closeOnEscape`	`true`	`boolean` Whether to close the dialog when the escape key is pressed
`closeOnInteractOutside`	`true`	`boolean` Whether to close the dialog when the outside is clicked
`defaultOpen`	`false`	`boolean` The initial open state of the dialog when rendered. Use when you don't need to control the open state of the dialog.
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`modal`	`true`	`boolean` Whether to prevent pointer interaction outside the element and hide all content below it
`preventScroll`	`true`	`boolean` Whether to prevent scrolling behind the dialog when it's opened
`role`	`\dialog\`	`'dialog' \| 'alertdialog'` The dialog's role
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`trapFocus`	`true`	`boolean` Whether to trap focus inside the dialog when it's opened
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`aria-label`		`string` Human readable label for the dialog, in event the dialog title is not rendered
`finalFocusEl`		`() => MaybeElement` Element to receive focus when the dialog is closed
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ trigger: string positioner: string backdrop: string content: string closeTrigger: string title: string description: string }>` The ids of the elements in the dialog. Useful for composition.
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`initialFocusEl`		`() => MaybeElement` Element to receive focus when the dialog is opened
`onEscapeKeyDown`		`(event: KeyboardEvent) => void` Function called when the escape key is pressed
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`		`(details: OpenChangeDetails) => void` Function to call when the dialog's open state changes
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onRequestDismiss`		`(event: LayerDismissEvent) => void` Function called when this layer is closed due to a parent layer being closed
`open`		`boolean` The controlled open state of the dialog
`persistentElements`		`(() => Element \| null)[]` Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
`present`		`boolean` Whether the node is present (controlled by the user)
`restoreFocus`		`boolean` Whether to restore focus to the element that had focus before the dialog was opened

Usage

Examples

Cover

Fullscreen

Responsive Size

Placements

Controlled

Nested Dialogs

Initial Focus

Inside Scroll

Outside Scroll

Motion Preset

Alert Dialog

Non-Modal Dialog

Props

Root