Dialog

Dialogs are promise-based modal interactions that replace browser's native alert(), confirm(), and prompt() with styled, customisable alternatives. Perfect for user confirmations, alerts, and input collection.

Key Features

• Promise-Based API - Modern async/await support
• Three Types - Alert, confirm, and prompt dialogs
• Customisable - Custom titles, button text, input types
• Keyboard Support - Enter to confirm, Escape to cancel

Basic Usage

// Alert
await Domma.elements.alert('Operation successful!');

// Confirm
const confirmed = await Domma.elements.confirm('Delete this item?');

// Prompt
const name = await Domma.elements.prompt('Enter your name:');

Simple Alert

$('#btn').on('click', async () => {
    await Domma.elements.alert('This is an alert message!');
    console.log('Alert closed');
});

Build a delete confirmation flow using dialogs.

$('#delete-btn').on('click', async () => {
    // Step 1: Confirm deletion
    const confirmed = await Domma.elements.confirm(
        'Are you sure you want to delete this item?',
        {
            title: 'Confirm Deletion',
            confirmText: 'Delete',
            cancelText: 'Cancel'
        }
    );

    if (!confirmed) return;

    // Step 2: Prompt for confirmation text
    const input = await Domma.elements.prompt(
        'Type "DELETE" to confirm:',
        {
            title: 'Final Confirmation',
            inputPlaceholder: 'Type DELETE'
        }
    );

    if (input === 'DELETE') {
        await Domma.elements.alert('Item deleted successfully!', {
            title: 'Success'
        });
    } else {
        await Domma.elements.alert('Deletion cancelled - text did not match.', {
            title: 'Cancelled'
        });
    }
});

Alert Dialog

Confirm Dialog

Prompt Dialog (Text)

Prompt Dialog (Email)

Custom Button Text

Accessibility

• Keyboard Support - Always enabled: Enter confirms, Escape cancels
• Focus Management - Auto-focuses confirm button or input field
• Clear Actions - Use descriptive button text ("Delete" not "OK")

UX Guidelines

• Confirm Destructive Actions - Always confirm deletes, permanent changes
• Provide Context - Use custom titles to clarify the action
• Handle Cancellation - Check promise result and handle appropriately

Performance

• Await Properly - Always use await or .then() to handle results
• Error Handling - Wrap in try/catch for production environments

Static Methods

Options

Dialogs are typically called programmatically, but you can attach them to buttons:

$.setup({
    '#delete-btn': {
        events: {
            click: async (e, $el) => {
                const confirmed = await Domma.elements.confirm(
                    'Delete this item?',
                    { confirmText: 'Delete', cancelText: 'Cancel' }
                );
                if (confirmed) {
                    // Perform deletion
                }
            }
        }
    }
});

Override these CSS variables to customise Dialog appearance and match your design system.

Example Override

:root {
    /* Same as Modal overrides */
    --dm-surface: #1e293b;
    --dm-text: #f1f5f9;
}

Full CSS Customisation Cheat-Sheet →