Mobile-friendly Toast Messages for Web Apps – Toastlet Notify

Preview:

Description:

Toastlet Notify is a dependency-free JavaScript notification library that creates customizable, accessible, mobile-friendly toast notifications for web applications.

It provides instant feedback for user actions through five notification types (success, error, warning, info, and notice) with minimal setup and configuration requirements.

Features:

• Mobile-friendly: Touch controls and swipe gestures
• 5 notification types: Success, error, warning, info, and notice
• Sticky notifications: Optional persistent messages
• Custom styling: CSS class injection and theme support
• Smooth animations: Configurable fade/slide animations and durations
• Notification icons: Each notification has its own SVG icon

How to use it:

1. Download and load the minified version of the Toastlet Notify library in the document. Note that the CSS is bundled directly into the JavaScript file, you don’t need to link a separate stylesheet.

<script src="toastletNotify.min.js"></script>

2. Call the global toastletNotify.notify() method to trigger a toast notification.

// Success notification
toastletNotify.notify('success', 'Data saved successfully!');
// Error notification
toastletNotify.notify('error', 'Connection failed. Please try again.');
// Warning notification
toastletNotify.notify('warning', 'Session expires in 5 minutes.');
// Info notification
toastletNotify.notify('info', 'New features available in settings.');
// Notice notification
toastletNotify.notify('notice', 'System maintenance scheduled for tonight.');

3. Customize your toast notifications by passing the options object as the third parameter to the toastletNotify.notify() method. All available options:

• sticky (boolean): If true, the toast will not close automatically. Default is false.
• delay (number): The time in milliseconds before the toast auto-closes. Default is 5000.
• customClass (string): A string of one or more CSS classes to add to the toast element for custom styling.
• transition (boolean): Toggles the fade and slide animations. Default is true.
• transitionDuration (number): Sets the animation speed in milliseconds. Default is 300.

toastletNotify.notify('success', 'Data saved successfully!',{
  sticky: false,
  delay: 5000,
  customClass: '',
  transition: true,
  transitionDuration: 300,
});

4. Override the notification styles using the library’s built-in component classes. Each toast has a consistent structure you can hook into.

• .toastlet: The main container for the entire notification.
• .toastlet-icon: The container for the SVG icon.
• .toastlet-title: The title text element.
• .toastlet-message: The main message text.
• .toastlet-controls: The container for the pause/close buttons.

For instance, if you wanted to make the message font italic across all notifications, you could write a simple rule.

.toastlet .toastlet-message {
  font-style: italic;
  font-size: 14px;
}

FAQs

Can I display multiple notifications simultaneously?
No, Toastlet Notify displays only the most recent notification by design. New notifications replace existing ones automatically.

What happens if JavaScript is disabled?
Since Toastlet Notify is entirely JavaScript-based, notifications won’t appear if JavaScript is disabled.

You Might Also Like:

• 10 Best Toast Notification JavaScript Libraries

Changelog:

07/15/1025

• refactor: improve state management and memory cleanup

07/12/1025

• Add a11y support and smart UX behavior with ARIA roles, keyboard navigation, and intelligent timer management