Alert Component Demo

A flexible floating alert system with multiple configuration options

Note: Alerts appear at the top of the page and stack vertically when multiple alerts are shown.

Basic Alert Types

// Basic usage
showSuccess('Operation completed successfully!');
showWarning('Please review your settings.');
showError('An error occurred.');

Auto-Dismiss Configuration

// Custom duration
showSuccess('Quick message', { duration: 2 });
showWarning('Longer message', { duration: 10 });
showError('Persistent message', { autoDisappear: false });

Close Button Configuration

// Closeable configuration
showSuccess('You can close this', { closeable: true });
showWarning('Cannot close this', { closeable: false });

Multiple Alerts & Management

// Multiple alerts stack automatically
showSuccess('First alert');
showWarning('Second alert');
showError('Third alert');

// Dismiss all at once
dismissAllAlerts();

Advanced Usage

// Full configuration object
const alertId = showAlert({
    message: 'Custom configured alert',
    type: 'success',
    autoDisappear: true,
    duration: 8,
    closeable: true
});

// Manual dismiss by ID
dismissAlert(alertId);