Alert Dialog

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

CMSPayload CMS Integration

Alert dialogs can be configured in the CMS for confirmation flows, with customizable titles, descriptions, and action buttons.

CMS Demo

See how content editors configure alert dialogs in a CMS:

CMS FieldsEN

Title

Description

Size

Confirm Label

Cancel Label

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

CMS ConfigurationSimulates Payload CMS alert dialog configuration

Payload Block Example

// In your Payload CMS blocks config
export const ConfirmationDialog = {
  slug: "confirmation-dialog",
  fields: [
    { name: "title", type: "text", localized: true },
    { name: "description", type: "textarea", localized: true },
    { name: "confirmLabel", type: "text", localized: true, defaultValue: "Continue" },
    { name: "cancelLabel", type: "text", localized: true, defaultValue: "Cancel" },
    {
      name: "size",
      type: "select",
      options: [
        { label: "Default", value: "default" },
        { label: "Small", value: "sm" },
      ],
    },
  ],
}

Rendering the Alert Dialog

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogAction,
  AlertDialogCancel,
} from "@mordecai-design-system/ui"

export function ConfirmDialog({ data, onConfirm }) {
  return (
    <AlertDialog>
      <AlertDialogTrigger render={<Button />}>
        Open
      </AlertDialogTrigger>
      <AlertDialogContent size={data.size}>
        <AlertDialogHeader>
          <AlertDialogTitle>{data.title}</AlertDialogTitle>
          <AlertDialogDescription>{data.description}</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>{data.cancelLabel}</AlertDialogCancel>
          <AlertDialogAction onClick={onConfirm}>
            {data.confirmLabel}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Basic Usage

Alert DialogConfirmation dialog with actions

Installation

pnpm add @corew500/ui

Usage

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogAction,
  AlertDialogCancel,
} from "@mordecai-design-system/ui"

<AlertDialog>
  <AlertDialogTrigger render={<Button />}>
    Open
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Examples

Small Size

<AlertDialogContent size="sm">
  <AlertDialogHeader>
    <AlertDialogTitle>Delete item?</AlertDialogTitle>
    <AlertDialogDescription>
      This will permanently delete the item.
    </AlertDialogDescription>
  </AlertDialogHeader>
  <AlertDialogFooter>
    <AlertDialogCancel>Cancel</AlertDialogCancel>
    <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
  </AlertDialogFooter>
</AlertDialogContent>

With Media

<AlertDialogContent>
  <AlertDialogHeader>
    <AlertDialogMedia>
      <AlertCircle className="size-8" />
    </AlertDialogMedia>
    <AlertDialogTitle>Warning</AlertDialogTitle>
    <AlertDialogDescription>
      You are about to perform a sensitive action.
    </AlertDialogDescription>
  </AlertDialogHeader>
  <AlertDialogFooter>
    <AlertDialogCancel>Cancel</AlertDialogCancel>
    <AlertDialogAction>Proceed</AlertDialogAction>
  </AlertDialogFooter>
</AlertDialogContent>

Sub-components

| Component | Description | |-----------|-------------| | AlertDialog | Root component | | AlertDialogTrigger | Button to open dialog | | AlertDialogContent | Dialog container | | AlertDialogHeader | Header section | | AlertDialogTitle | Dialog title | | AlertDialogDescription | Dialog description | | AlertDialogFooter | Action buttons container | | AlertDialogAction | Confirm button | | AlertDialogCancel | Cancel button | | AlertDialogMedia | Icon/image container |

Props

AlertDialogContent

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.
`size`	enum	`default`	—

AlertDialogAction

Extends Button props.

AlertDialogCancel

Prop	Type	Default	Description
`nativeButton`	enum	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (e.g. `<div>`).
`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.
`variant`	enum	`outline`	—
`size`	enum	`default`	—