Noti5.js Demo

Toast Notifications

// Basic toast
Noti5.toast('This is a simple toast message');

// Type-specific shortcuts
Noti5.success('Operation completed successfully', 'Success');
Noti5.error('Something went wrong', 'Error');
Noti5.warning('Proceed with caution', 'Warning');
Noti5.info('Here is some information', 'Info');

Toast Positions

// Position options: 'top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center'
Noti5.toast('Custom position example', 'Position', 'info', 'bottom-left');

Duration & Manual Control

// Custom duration in milliseconds (default is 4000ms)
Noti5.toast('Long duration example', 'Duration', 'primary', 'top-right', 10000);

// Manual control
var toastId = Noti5.info('Click X to dismiss', 'Manual', 'top-right', 20000);
Noti5.dismiss(toastId); // Dismiss programmatically

Alerts & Confirmations

// Basic alert
Noti5.alert('This is a simple alert message');

// Alert with type
Noti5.alert('Your changes have been saved', 'Success', 'success');

// Basic confirmation
Noti5.confirm('Are you sure you want to proceed?', function() {
    // Confirm callback
    Noti5.success('Action confirmed');
});

// Full confirmation with all options
Noti5.confirm('Delete this item?', 
    function() { 
        // Confirm callback
        Noti5.success('Item deleted'); 
    }, 
    function() { 
        // Cancel callback
        Noti5.info('Deletion cancelled'); 
    }, 
    'warning',  // Type (primary, success, error, warning, info)
    'Delete',   // Confirm button text
    'Cancel'    // Cancel button text
);

Global Configuration

// Set default position for all toasts
Noti5.config.setPosition('bottom-right');

// Set default duration for all toasts (milliseconds)
Noti5.config.setDuration(8000);

// Customize colors
Noti5.config.setColors({
    primary: '#8b5cf6',
    success: '#059669',
    error: '#dc2626',
    warning: '#d97706',
    info: '#2563eb'
});

// Chain configuration methods
Noti5.config
    .setPosition('top-center')
    .setDuration(5000)
    .setColors({ primary: '#8b5cf6' });