Basic Notifications
Click the buttons below to see different notification types:
toastManager.success('Operation completed successfully!');
toastManager.error('Something went wrong!');
toastManager.warning('Please review your input!');
toastManager.info('New updates available!');
Advanced Options
Customize duration, titles, and more:
// Quick notification (2 seconds)
toastManager.success('Quick message', null, 2000);
// Long notification (10 seconds)
toastManager.info('This stays longer', 'Extended', 10000);
// Persistent (must close manually)
toastManager.show({
message: 'Manual close required',
type: 'warning',
duration: 0
});
Multiple Notifications
Test notification stacking and management:
Key Features
Theme Support
Seamless light/dark mode integration
Mobile Ready
Responsive on all screen sizes
Accessible
ARIA labels and keyboard support
Smooth Animations
60fps elegant transitions
Hover to Pause
Read messages at your pace
Smart Stacking
Graceful multiple notifications
Quick Start
1. Include the files
<link rel="stylesheet" href="toast-notifications.css">
<script src="toast-notifications.js"></script>
2. Show a notification
// Simple
toastManager.success('Action completed!');
// Advanced
toastManager.show({
message: 'Your custom message',
title: 'Custom Title',
type: 'info',
duration: 5000
});
3. Use with Flask
# Python
from flask import flash
flash('User created successfully', 'success')
# Automatically becomes a toast on page load!