Alert Dialog

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

Basic Usage

Variants

Schema

import type { SchemaNode } from '@object-ui/types';

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
  actionVariant?: 'default' | 'destructive';  // Confirm button variant; red confirm when 'destructive'

  // 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.

The confirm button's look is actionVariant. Omit it and the button stays the default primary; write 'destructive' for the red confirm a delete dialog wants. Those are the two values it takes — not the six a button node takes — because the renderer applies the variant as a class override on top of the primitive's built-in styling, and the remaining upstream variants set no background and/or no text colour, so the default's would show through. The cancel button is always outline and has no variant key. (The older spelling confirmVariant is retired and refused by name — it never reached the DOM.)

Examples

With Custom Actions