Alert Dialog

Live Editor

function AlertDialogDemo() {
  return (
    <ThemeProvider>
      <AlertDialog
        open
        tone="danger"
        variant="soft"
        size="lg"
        radius={12}
        elevation="high"
        dismissible
        closeOnEsc
        closeOnBackdrop={false}
        onConfirm={(detail) => console.log(detail)}
      >
        <AlertDialogIcon>
          <AlertTriangleIcon size={16} />
        </AlertDialogIcon>
        <AlertDialogTitle>Delete environment</AlertDialogTitle>
        <AlertDialogDescription>
          This action permanently removes the selected environment and cannot be undone.
        </AlertDialogDescription>
        <AlertDialogContent>
          Review the impact before continuing. Audit metadata will be retained.
        </AlertDialogContent>
        <AlertDialogActions>
          <Button variant="secondary">Cancel</Button>
          <Button>Delete environment</Button>
        </AlertDialogActions>
      </AlertDialog>
    </ThemeProvider>
  );
}

Result

Loading...

Key Props

open, headless, dismissible, closeOnEsc, closeOnBackdrop, lockWhileLoading, roleType, tone, variant, size, radius, elevation, indicator, state, initialFocus, dialogId, config, onOpen, onConfirm, onCancel, onDismiss, onClose, onChange

Structured Helpers

AlertDialogIcon, AlertDialogTitle, AlertDialogDescription, AlertDialogContent, AlertDialogActions

Notes

• Use config when you want the built-in confirm/cancel template path.
• Use structured children when you need custom content, custom actions, or richer workflow messaging.
• radius accepts values like 0, 4, 8, 12, or full.