ConfirmDialog

ConfirmDialog is a flexible confirmation modal component that prompts users for action validation. Built on top of the Dialog component, it provides a standardized interface for displaying confirmation prompts with customizable content, buttons, and behavior.

Setup

Requires <GeckoUIProvider> to wrap your app.

import { ConfirmDialog } from '@geckoui/geckoui';

Basic Usage

ConfirmDialog.show({
  title: "Confirm Action",
  content: "Are you sure you want to proceed?",
  onConfirm: () => {
    console.log('Confirmed');
  }
});

API Reference

ConfirmDialog.show(options)

Returns: string — the overlay id (forwarded from Dialog.show).

Callback Arguments

Both onConfirm and onCancel receive an object with:

ConfirmDialog.dismiss(id?)

Programmatically closes the confirm dialog. Pass the id returned by show() to close a specific dialog, or call with no argument to close the topmost overlay.

Examples

Delete Confirmation (Async)

function DeleteButton({ itemId }) {
  const handleDelete = () => {
    ConfirmDialog.show({
      title: "Delete Item",
      content: "Are you sure you want to delete this item? This action cannot be undone.",
      confirmButtonLabel: "Delete",
      cancelButtonLabel: "Keep",
      onConfirm: async () => {
        await deleteItem(itemId);
        toast.success("Item deleted");
      }
    });
  };

  return <Button onClick={handleDelete}>Delete</Button>;
}

Rich Content with Custom Component

ConfirmDialog.show({
  title: "Transfer Ownership",
  content: ({ dismiss }) => (
    <div className="space-y-4">
      <p>Transfer project ownership to:</p>
      <UserSelector onSelect={setSelectedUser} />
      <Button variant="link" onClick={dismiss}>Cancel transfer</Button>
    </div>
  ),
  confirmButtonLabel: "Transfer Now",
  onConfirm: () => {
    performTransfer();
  }
});

Programmatic Dismissal

const id = ConfirmDialog.show({
  title: "Processing",
  content: "Please wait while we process your request..."
});

// Close from anywhere
ConfirmDialog.dismiss(id);

Behavior

• If onConfirm or onCancel is declared async, the respective button shows a loading state until the promise resolves.

• The check is on the function itself, not on what it returns. A function that returns a promise without being declared async gets no loading state:

  // loading state
  onConfirm: async () => { await deleteUser(id); }
  
  // no loading state, the dialog closes straight away
  onConfirm: () => deleteUser(id)

  Use this when you deliberately want the dialog to close without waiting.

• After the callback resolves, the dialog closes automatically unless preventDefault() was called.

• Pressing Enter confirms (when no focusable element is focused), and only when the confirm dialog is the topmost overlay. Stacked dialogs below it ignore Enter.

Related Components

• GeckoUIProvider — Required provider
• Dialog — Lower-level dialog primitive