Dialog

Modal dialog on the system scrim, with a destructive-confirmation variant.

Prop	Type	Notes
`open`	`boolean`
`onClose`	`() => void`	Called on Escape or scrim click.
`title`	`React.ReactNode`
`destructive`	`boolean`	Oxblood top seal + role="alertdialog". For destructive confirmation the confirming Button is variant="secondary" (oxblood): consequence, not failure — signal red is reserved for things that broke.
`actions`	`React.ReactNode`	Action row (left-aligned): confirming Button first, then quiet cancel.
`className`	`string`
`children`	`React.ReactNode`

Other props pass through to the root element (React.HTMLAttributes<HTMLDivElement>).

Preview

Declarations

TypeScript

export interface DialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
  open?: boolean;
  /** Called on Escape or scrim click. */
  onClose?: () => void;
  title?: React.ReactNode;
  /** Oxblood top seal + role="alertdialog". For destructive confirmation the
   *  confirming Button is variant="secondary" (oxblood): consequence, not
   *  failure — signal red is reserved for things that broke. */
  destructive?: boolean;
  /** Action row (left-aligned): confirming Button first, then quiet cancel. */
  actions?: React.ReactNode;
  className?: string;
  children?: React.ReactNode;
}

/**
 * Modal dialog on the system scrim, with a destructive-confirmation variant.
 */
export function Dialog(props: DialogProps): React.JSX.Element | null;