Toast

Toast notifications provide lightweight, non-blocking feedback to users. They appear briefly at screen edges and auto-dismiss, perfect for success confirmations, warnings, and informational messages.

Key Features

• Auto-Dismiss - Configurable duration with optional persistence
• Multiple Types - Success, error, warning, info styles
• Positioning - 9 position options (top-left, bottom-right, etc.)
• Queueing - Stack multiple toasts automatically

Basic Usage

Domma.elements.toast('Operation successful!', {
    type: 'success',
    duration: 3000,
    position: 'top-right'
});

Simple Toast

$('#btn').on('click', () => {
    Domma.elements.toast('Hello, World!', {
        type: 'info',
        duration: 3000
    });
});

Build a form submission flow with toast notifications.

$('#submit-btn').on('click', () => {
    const email = $('#email').val();
    const password = $('#password').val();

    // Validation with error toast
    if (!email) {
        Domma.elements.toast('Email is required', {
            type: 'error',
            duration: 3000
        });
        return;
    }

    if (password.length < 8) {
        Domma.elements.toast('Password must be at least 8 characters', {
            type: 'warning',
            duration: 4000
        });
        return;
    }

    // Success toast
    Domma.elements.toast('Account created successfully!', {
        type: 'success',
        duration: 5000
    });
});

Toast Types

Positioning

Duration Options

With Actions

Accessibility

• ARIA Live Regions - Toasts use role="status" and aria-live="polite"
• Avoid Essential Info - Don't put critical information only in toasts
• Dismissible - Provide close button for screen reader users

UX Guidelines

• Appropriate Duration - 3-5 seconds for reading time, longer for actions
• Type Matching - Success for confirmations, error for failures, warning for alerts
• Clear Messages - Concise text (1-2 sentences maximum)
• Limit Stack - Don't overwhelm users with too many simultaneous toasts

Performance

• Auto-Cleanup - Toasts automatically remove themselves from DOM
• Queue Management - System handles multiple toasts efficiently

Static Method

Options

Methods

Attach toasts to button clicks using the config engine:

$.setup({
    '#save-btn': {
        events: {
            click: (e, $el) => {
                Domma.elements.toast('Changes saved successfully!', {
                    type: 'success',
                    duration: 3000
                });
            }
        }
    },
    '#delete-btn': {
        events: {
            click: (e, $el) => {
                Domma.elements.toast('Item deleted', {
                    type: 'error',
                    duration: 4000
                });
            }
        }
    }
});