Dialog

A modal dialog that interrupts the user with important content and expects a response.

CMSPayload CMS Integration

Dialogs can display CMS-configured content like confirmation messages, help documentation, or rich media previews.

CMS Demo

See how content editors configure dialogs in a CMS:

CMS FieldsEN

Title

Description

Cancel Label

Confirm Label

Action Variant

Show Close Button

This simulates how a content editor configures dialogs in Payload CMS. All text content can be localized.

CMS ConfigurationSimulates Payload CMS dialog configuration

Basic Usage

Basic dialog

With form

Controlled state

Custom close button

DialogModal dialog window

Installation

pnpm add @corew500/ui

Usage

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@mordecai-design-system/ui"

<Dialog>
  <DialogTrigger>Open Dialog</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>
        Dialog description goes here.
      </DialogDescription>
    </DialogHeader>
    <p>Dialog content...</p>
    <DialogFooter>
      <DialogClose>Cancel</DialogClose>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Examples

Without Close Button

<DialogContent showCloseButton={false}>
  <DialogHeader>
    <DialogTitle>Custom Close</DialogTitle>
  </DialogHeader>
  <DialogFooter showCloseButton>
    <Button>Save</Button>
  </DialogFooter>
</DialogContent>

Controlled

const [open, setOpen] = useState(false)

<Dialog open={open} onOpenChange={setOpen}>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Controlled Dialog</DialogTitle>
    </DialogHeader>
    <Button onClick={() => setOpen(false)}>
      Close programmatically
    </Button>
  </DialogContent>
</Dialog>

With Form

<DialogContent>
  <DialogHeader>
    <DialogTitle>Edit Profile</DialogTitle>
    <DialogDescription>
      Make changes to your profile here.
    </DialogDescription>
  </DialogHeader>
  <form className="space-y-4">
    <Input placeholder="Name" />
    <Input type="email" placeholder="Email" />
  </form>
  <DialogFooter>
    <DialogClose>Cancel</DialogClose>
    <Button type="submit">Save changes</Button>
  </DialogFooter>
</DialogContent>

Sub-components

| Component | Description | |-----------|-------------| | Dialog | Root component managing open state | | DialogTrigger | Button that opens the dialog | | DialogContent | The modal content container | | DialogHeader | Header area with title/description | | DialogTitle | Main heading | | DialogDescription | Supporting text | | DialogFooter | Footer with actions | | DialogClose | Button to close the dialog | | DialogOverlay | Background overlay |

Props

DialogContent

Prop	Type	Default	Description
`initialFocus`	enum	—	Determines the element to focus when the dialog is opened. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (first tabbable element or popup). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
`finalFocus`	enum	—	Determines the element to focus when the dialog is closed. - `false`: Do not move focus. - `true`: Move focus based on the default behavior (trigger or previously focused element). - `RefObject`: Move focus to the ref element. - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`). Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`showCloseButton`	enum	`true`	—

DialogFooter

Prop	Type	Default	Description
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`showCloseButton`	enum	`false`	—

Dialog

Prop	Type	Default	Description
`open`	enum	—	Whether the dialog is currently open.
`defaultOpen`	enum	`false`	Whether the dialog is initially open. To render a controlled dialog, use the `open` prop instead.
`modal`	enum	`true`	Determines if the dialog enters a modal state when open. - `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled. - `false`: user interaction with the rest of the document is allowed. - `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.
`onOpenChange`	(open: boolean, eventDetails: DialogRootChangeEventDetails) => void	—	Event handler called when the dialog is opened or closed.
`onOpenChangeComplete`	(open: boolean) => void	—	Event handler called after any animations complete when the dialog is opened or closed.
`disablePointerDismissal`	enum	`false`	Determines whether the dialog should close on outside clicks.
`actionsRef`	RefObject<DialogRootActions>	—	A ref to imperative actions. - `unmount`: When specified, the dialog will not be unmounted when closed. Instead, the `unmount` function must be called to unmount the dialog manually. Useful when the dialog's animation is controlled by an external library. - `close`: Closes the dialog imperatively when called.
`handle`	DialogHandle<unknown>	—	A handle to associate the dialog with a trigger. If specified, allows external triggers to control the dialog's open state. Can be created with the Dialog.createHandle() method.
`triggerId`	string	—	ID of the trigger that the dialog is associated with. This is useful in conjunction with the `open` prop to create a controlled dialog. There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).
`defaultTriggerId`	string	—	ID of the trigger that the dialog is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.

Accessibility

Focus is trapped within the dialog
Escape key closes the dialog
Background content is inert when open
Title and description are announced to screen readers