Alert Dialog

Modal dialog for important confirmations requiring user action

Basic Usage

pnpm add @corew500/ui

import { AlertDialog } from "@corew500/ui/alert-dialog"

<AlertDialog>Content</AlertDialog>

CMSPayload CMS Integration

This component supports CMS-driven content via @corew500/cms-payload.

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.

Prop	Type	Default	Description
`onOpenChange`	(open: boolean, eventDetails: AlertDialogRootChangeEventDetails) => void	—	Event handler called when the dialog is opened or closed.
`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 alert dialog with a trigger. If specified, allows external triggers to control the alert dialog's open state. Can be created with the AlertDialog.createHandle() method.
`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.
`onOpenChangeComplete`	(open: boolean) => void	—	Event handler called after any animations complete when the dialog is opened or closed.
`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.

- Component accepts pre-resolved strings for all text content
`AlertDialogTitle` children should be translated
`AlertDialogDescription` children should be translated
Button labels in `AlertDialogAction` and `AlertDialogCancel` should be translated