đ Installation & Usage
Start using Toastlet Notify in seconds. Just include the CDN link and you're ready to go!
đĻ Via CDN (Recommended)
<script src="https://cdn.jsdelivr.net/gh/pedrohrigolin/Toastlet-Notify-JS@main/toastletNotify.min.js"></script>⥠Basic Usage
// Simple notification
toastletNotify.notify('success', 'Operation completed successfully!');
// With options
toastletNotify.notify('warning', 'Please check your input', {
delay: 10000,
});đ¨ Custom CSS Example
/* Example of a dark theme */
.toastlet.dark-theme {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
color: #ecf0f1 !important;
border-left: 4px solid #3498db !important;
}/* Usage */
toastletNotify.notify('success', 'Notification with custom style!', {
customClass: 'dark-theme'
});đ¯ Notification Types
Try out all notification types and see how they work in real-time. Each type has a distinct style to match its purpose and context.
â Success
Confirms completed actions and positive outcomes to reassure users
toastletNotify.notify('success', 'Your changes have been saved successfully!');â Error
Alerts users to problems that require attention or immediate action
toastletNotify.notify('error', 'Could not connect to the server. Please try again.');âšī¸ Info
Provides context, explanations, and useful guidance in a neutral tone
toastletNotify.notify('info', 'You can drag and drop files here to upload.');â ī¸ Warning
Warns users about potential issues before they become critical
toastletNotify.notify('warning', 'Your session will expire in 5 minutes.');đ Notice
Delivers system announcements, updates, and general awareness messages
toastletNotify.notify('notice', 'System maintenance is scheduled for 2 AM today.');𧲠Sticky
Persistent notifications that remain visible until dismissed by the user
toastletNotify.notify('info', 'This notification will remain visible until you dismiss it.', {
sticky: true
});âī¸ Settings & Customizations
Explore Toastlet Notify's advanced options to customize the behavior and appearance of notifications.
𧲠Sticky Notification
Notifications that stay on screen until manually dismissed by the user
toastletNotify.notify('warning', 'This notification is sticky!', {
sticky: true
});âąī¸ Custom Duration (Delay)
Control how long the notification stays visible before automatically disappearing
toastletNotify.notify('info', 'This notification lasts for 10 seconds.', {
delay: 10000
});đ¨ Custom Class
Apply custom CSS styles to create unique themes and distinct visuals
toastletNotify.notify('success', 'Notification with a dark theme!', {
customClass: 'dark-theme'
});đī¸ No Transition
Disable animations for a more direct and instantaneous experience
toastletNotify.notify('error', 'No animations!', {
transition: false
});đ Slow Transition
Customize the speed of animations to create smoother and more elegant effects
toastletNotify.notify('notice', 'Slower animation!', {
transitionDuration: 800
});đ Combining Options
Combine multiple settings to create fully customized notifications
toastletNotify.notify('success', 'Customized notification!', {
sticky: true,
customClass: 'rainbow-theme',
transitionDuration: 600
});đ ī¸ Custom Demo
Create your own notification with custom settings and see the generated code below.
đ¨ Features
Mobile Ready
Responsive design with swipe gestures and touch-optimized controls
Zero Dependencies
No external libraries needed. Just include and use!
Lightweight
Only ~29KB minified / ~6.5KB gzipped with optimized performance
Customizable
Easy to style and customize with CSS classes
Interactive
Pause on hover, manual close, and auto-dismiss
Cross-Browser
Works on all modern browsers and devices
đ Use Cases
See how Toastlet Notify can be used in real-world scenarios.
đ Form Validation
Show validation errors and success messages
đž Save Operations
Feedback for save, update, and delete operations
đ Authentication
Login, logout, and session management
đ API Responses
Handle success and error responses from APIs