Skip to Content
Hashti Design System
Components

Alert Dialog

Modal confirmation overlay requiring explicit user confirmation before executing destructive or irreversible actions.

Alert Dialog

The AlertDialog component presents a high-urgency confirmation modal designed specifically for destructive, irreversible, or high-consequence operations (such as deleting project records, revoking security credentials, or rolling back live database migrations).

Unlike standard informational modals, an Alert Dialog strictly forces the user to make an explicit choice. Backdrop clicks do not dismiss the dialog (isDismissable={false}), and assistive technology is immediately notified via the W3C alertdialog role.

Alert DialogModal barrier for irreversible, destructive user decisions.

Import

import { AlertDialog, Button } from "@hashti/react";

Examples

Destructive Delete Confirmation (Danger)

The default danger kind features high-contrast red warning accents and requires explicit confirmation:

import { useState } from "react";
import { AlertDialog, Button } from "@hashti/react";

export function DeleteConfirmationDemo() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button variant="danger" onPress={() => setIsOpen(true)}>
        Delete Architectural Archive
      </Button>

      <AlertDialog
        isOpen={isOpen}
        onOpenChange={setIsOpen}
        kind="danger"
        title="Delete Survey Archive?"
        description="This action cannot be undone. All 3D point-cloud scans, photogrammetry models, and CAD annotations for this structure will be permanently erased."
        confirmLabel="Yes, Delete Archive"
        cancelLabel="Keep Archive"
        onConfirm={() => {
          console.log("Archive deleted successfully.");
        }}
      />
    </>
  );
}

Warning Dialog (Unsaved Changes)

Use kind="warning" when alerting users of potential data loss before navigating away:

import { useState } from "react";
import { AlertDialog, Button } from "@hashti/react";

export function UnsavedChangesDemo() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button variant="secondary" onPress={() => setIsOpen(true)}>
        Discard Draft Blueprint
      </Button>

      <AlertDialog
        isOpen={isOpen}
        onOpenChange={setIsOpen}
        kind="warning"
        title="Discard Unsaved Architectural Changes?"
        description="You have modified 4 structural layers in the active vault view. If you discard now, these edits cannot be recovered."
        confirmLabel="Discard Edits"
        cancelLabel="Continue Editing"
        onConfirm={() => {
          console.log("Draft edits discarded.");
        }}
      />
    </>
  );
}

Informational Confirmation (Info)

Use kind="info" for important non-destructive milestones:

import { useState } from "react";
import { AlertDialog, Button } from "@hashti/react";

export function InfoConfirmationDemo() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button variant="primary" onPress={() => setIsOpen(true)}>
        Publish Restoration Dossier
      </Button>

      <AlertDialog
        isOpen={isOpen}
        onOpenChange={setIsOpen}
        kind="info"
        title="Publish Dossier to Public Registry?"
        description="Publishing will issue a cryptographic timestamp and assign a permanent DOI identifier visible to UNESCO peer reviewers worldwide."
        confirmLabel="Confirm & Publish"
        cancelLabel="Review Again"
        onConfirm={() => {
          console.log("Dossier published to registry.");
        }}
      />
    </>
  );
}

Asynchronous Action with Pending State

Pass isPending={true} to indicate ongoing network requests while disabling controls and displaying a spinner:

import { useState } from "react";
import { AlertDialog, Button } from "@hashti/react";

export function AsyncAlertDialogDemo() {
  const [isOpen, setIsOpen] = useState(false);
  const [isPending, setIsPending] = useState(false);

  const handleConfirm = () => {
    setIsPending(true);
    setTimeout(() => {
      setIsPending(false);
      setIsOpen(false);
      alert("Workspace decommissioned.");
    }, 1200);
  };

  return (
    <>
      <Button variant="danger" onPress={() => setIsOpen(true)}>
        Decommission Workspace
      </Button>

      <AlertDialog
        isOpen={isOpen}
        onOpenChange={setIsOpen}
        kind="danger"
        isPending={isPending}
        title="Decommission Workspace?"
        description="Decommissioning will revoke all active API keys and detach storage volumes."
        confirmLabel="Decommission"
        cancelLabel="Cancel"
        onConfirm={handleConfirm}
      />
    </>
  );
}

Props Reference

PropTypeDefaultDescription
kind'danger' | 'warning' | 'info''danger'Visual theme and icon variant for the dialog.
titleReactNode—Primary alert heading (required).
descriptionReactNode—Explanatory description detailing the consequences.
childrenReactNode—Custom body content (overrides description if provided).
confirmLabelstring"Confirm"Text label for the confirmation button.
cancelLabelstring"Cancel"Text label for the cancellation button.
onConfirm() => void—Callback fired when the user confirms the action.
onCancel() => void—Callback fired when the user cancels or presses Esc.
isPendingbooleanfalseDisables buttons and displays loading spinners on the confirm button.
isOpenboolean—Controlled open visibility state.
defaultOpenbooleanfalseInitial uncontrolled open state.
onOpenChange(isOpen: boolean) => void—Handler invoked when open state transitions.
dir'ltr' | 'rtl'—Text direction override for bilingual layouts.

Accessibility

AlertDialog implements the WAI-ARIA alertdialog specification:

  • Urgent Screen Reader Interruption: Using role="alertdialog", assistive technologies immediately announce the modal title and description, interrupting other queued screen reader speech to emphasize the gravity of the decision.
  • Initial Focus on the Safest Action: In accordance with accessibility safety standards, focus is automatically initialized on the Cancel button rather than the destructive confirmation button. This guarantees that an accidental Enter or Space keystroke cancels rather than executes the dangerous action.
  • Non-Dismissable Backdrop: The background overlay click handler is disabled (isDismissable={false}), preventing inadvertent clicks outside from discarding critical prompts without a deliberate user choice.
  • Escape Key Handling: Pressing Esc triggers onCancel and closes the dialog safely.

Keyboard Interactions

KeyAction
TabMoves focus between Cancel and Confirm action buttons.
EscDismisses alert dialog if configured to permit backdrop cancel.

WAI-ARIA & Data Attributes

AttributeTargetDescription
[data-entering]Dialog SurfaceActive during mount animation.
[data-exiting]Dialog SurfaceActive during exit animation.

Sheet

Gesture-driven modal sheet with touch swipe-to-dismiss, velocity tracking, configurable snap points, and responsive edge transitions.

Preview Trigger

Contextual hovercard popover that displays rich preview cards when hovering or focusing an interactive trigger link or badge.

On this page

Alert DialogImportExamplesDestructive Delete Confirmation (Danger)Warning Dialog (Unsaved Changes)Informational Confirmation (Info)Asynchronous Action with Pending StateProps ReferenceAccessibilityKeyboard InteractionsWAI-ARIA & Data Attributes