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'
});

Add toast notifications to your page in two simple steps

Step 1: Include Domma

Add Domma CSS and JavaScript to your page:

<!-- CSS -->
<link rel="stylesheet" href="dist/domma.css">
<link rel="stylesheet" href="dist/elements.css">

<!-- JavaScript -->
<script src="dist/domma.min.js"></script>

Step 2: Show Toast Notifications

Call Domma.elements.toast() to display notifications:

// Success notification
Domma.elements.toast('Operation successful!', {
    type: 'success',       // 'success', 'error', 'warning', 'info'
    duration: 3000,        // Auto-dismiss after 3 seconds
    position: 'top-right'  // Position on screen
});

// Error notification
Domma.elements.toast('Something went wrong!', {
    type: 'error',
    duration: 5000
});

// With custom action button
Domma.elements.toast('File uploaded', {
    type: 'info',
    action: 'View',
    onAction: () => {
        console.log('Action clicked');
    }
});

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
                });
            }
        }
    }
});

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

Example Override

/* Toast positioning/styling via JavaScript options */

Full CSS Customisation Cheat-Sheet →