ObjectUIObjectUI
ComponentsOverlay

Alert Dialog

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

The Alert Dialog component is used to interrupt the user with important content and require a confirmation before proceeding.

Basic Usage

Basic Alert Dialog

Variants

Destructive Action

Confirmation Dialog

Schema

interface AlertDialogSchema {
  type: 'alert-dialog';
  title?: string;                       // Dialog title
  description?: string;                 // Dialog description

  // Trigger
  trigger?: SchemaNode | SchemaNode[];  // Component that triggers the dialog

  // Body and footer
  content?: SchemaNode | SchemaNode[];  // Rendered between the header and the footer
  cancelText?: string;                  // Cancel button label; no cancel button when omitted
  actionText?: string;                  // Confirm button label; no confirm button when omitted

  // Open state
  defaultOpen?: boolean;                // Initial state when uncontrolled (default: false)
  open?: boolean;                       // Controlled open state

  // Styling
  className?: string;
}

The footer is driven by the two label keys: the cancel button renders only when cancelText is set and the confirm button only when actionText is set — neither has a renderer default (the designer palette seeds Cancel / Continue). The confirm button's click handler, onAction, is a runtime slot a React host supplies through the TypeScript interface; it has no JSON spelling, and the validator refuses it by name.

Examples

With Custom Actions

Custom Actions

On this page