ConfirmationDialog

Dialog for confirming user actions.

Purpose

ConfirmationDialog prompts users to confirm or cancel an action.

Key Features

• Built-in confirm and cancel buttons
• Configurable button set (DialogButtons)
• Host-rendered — triggered with a hook, awaited as a Promise<DialogResult>
• Modal behavior

Host-rendered

ConfirmationDialog is rendered by the dialog host, not instantiated directly. Register it once with DialogComponents, then trigger it from anywhere with the useConfirmationDialog hook. The request carries the title, message, and buttons — there are no per-instance label/icon/callback props.

Basic Usage

Register the dialog component near the root of your app:

import { ConfirmationDialog } from '@cratis/components/Dialogs';
import { DialogComponents } from '@cratis/arc.react/dialogs';

export const App = () => (
    <DialogComponents confirmation={ConfirmationDialog}>
        <YourApp />
    </DialogComponents>
);

Trigger it from a component and await the result:

import { useConfirmationDialog, DialogButtons, DialogResult } from '@cratis/arc.react/dialogs';

function MyComponent() {
    const [showConfirm] = useConfirmationDialog(
        'Confirm Delete',
        'Are you sure you want to delete this item?',
        DialogButtons.YesNo
    );

    const handleDelete = async () => {
        const result = await showConfirm();
        if (result === DialogResult.Yes) {
            deleteItem();
        }
    };

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

Request

The ConfirmationDialogRequest the host threads into the dialog carries:

• title: Dialog header text
• message: Confirmation message
• buttons: A DialogButtons value (Ok, OkCancel, YesNo, or YesNoCancel)

useConfirmationDialog(title?, message?, buttons?) returns [showConfirm], where showConfirm() returns a Promise<DialogResult> resolving to the button the user picked.

Examples

Delete confirmation

const [showConfirm] = useConfirmationDialog(
    'Delete Item',
    'This action cannot be undone. Are you sure?',
    DialogButtons.YesNo
);

const onDelete = async () => {
    if (await showConfirm() === DialogResult.Yes) {
        deleteItem();
    }
};

Save changes

const [showConfirm] = useConfirmationDialog(
    'Unsaved Changes',
    'You have unsaved changes. Do you want to save them?',
    DialogButtons.YesNoCancel
);

const onLeave = async () => {
    const result = await showConfirm();
    if (result === DialogResult.Yes) {
        await save();
    } else if (result === DialogResult.No) {
        discard();
    }
    // DialogResult.Cancelled keeps the user on the page
};

Proceed with action

const [showConfirm] = useConfirmationDialog(
    'Confirm Action',
    'This will affect all users. Continue?',
    DialogButtons.OkCancel
);

const onProceed = async () => {
    if (await showConfirm() === DialogResult.Ok) {
        proceed();
    }
};