AlertDialog
Overlays

AlertDialog

Confirmation dialog for destructive or irreversible actions. Requires deliberate dismissal.

Component behavior

AlertDialog requests confirmation with explicit actions. Backdrop clicks do not dismiss the dialog. Initial focus is placed on Cancel.

Use cases
  • Confirmation for destructive actions such as deletion or revocation.
  • Actions whose consequences require confirmation.
  • Confirmation that identifies the affected resource.
Alternatives

Modal: the task can safely allow backdrop dismissal.

Toast: a reversible action can provide Undo instead of confirmation.

Callout: the message describes a state without requiring confirmation.

Props

AlertDialog does not close on backdrop click or Escape. It focuses Cancel by default so an accidental Enter never triggers the destructive action.

AlertDialogProps props
PropTypeDefaultDescription
openboolean—Visibility controlled by caller.
onClose() => void—Called when Cancel is clicked.
onConfirm() => void | Promise<void>—The destructive action to guard.
titleReactNode—Title describing the action to confirm.
descriptionReactNode—What will be lost and whether it is reversible.
toneAlertTone"danger""danger" | "warning" | "info".
confirmLabelstring"Confirm"Label on the confirm button.
cancelLabelstring"Cancel"Label on the cancel button.
confirmTextstring—Requires typing this exact string before Confirm enables.
loadingboolean—Disables buttons and shows pending label while onConfirm resolves.
childrenReactNode—Extra content between description and buttons.
widthnumber400Dialog width in px.

Preview

AlertDialog

Examples

Danger confirmation

ImportTSX
import { AlertDialog, Button } from "@solarius/onset";
import { useState } from "react";

function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="danger" onClick={() => setOpen(true)}>
        Delete cluster
      </Button>
      <AlertDialog
        open={open}
        onClose={() => setOpen(false)}
        onConfirm={() => {
          /* delete */ setOpen(false);
        }}
        title="Delete cluster?"
        description="This action is irreversible. All 14 nodes and their data will be permanently removed."
      />
    </>
  );
}

With confirmText gate

AlertDialog with confirmTextTSX
<AlertDialog
  open={open}
  onClose={onClose}
  onConfirm={handleDelete}
  title="Delete production database?"
  description="This cannot be undone. All records will be lost."
  confirmLabel="Delete database"
  confirmText="delete production db"
  tone="danger"
/>

Warning and info tones

Warning toneTSX
<AlertDialog
  open={open}
  onClose={onClose}
  onConfirm={onConfirm}
  title="Downgrade plan?"
  description="You will lose access to premium features. Billing adjusts next cycle."
  tone="warning"
  confirmLabel="Downgrade"
/>
Info toneTSX
<AlertDialog
  open={open}
  onClose={onClose}
  onConfirm={onConfirm}
  title="Send reminder?"
  description="All 23 team members will receive an email reminder."
  tone="info"
  confirmLabel="Send"
/>

Async confirm with loading

Loading stateTSX
const [loading, setLoading] = useState(false);

<AlertDialog
  open={open}
  onClose={onClose}
  onConfirm={async () => {
    setLoading(true);
    await deleteCluster(id);
    setLoading(false);
    onClose();
  }}
  title="Delete cluster?"
  description="This action is irreversible."
  loading={loading}
/>;