Advanced Toast Notification System with Modern UX
Editora Toast is a modern, accessible, and feature-rich toast notification system designed for developers who care about user experience. Built with performance, accessibility, and customization in mind.
Get started in minutes with our simple API. Compatible with any JavaScript framework or vanilla JS.
// Install via npm
npm install @editora/toast
// Or use CDN
<script src="https://cdn.jsdelivr.net/npm/@editora/toast@latest/dist/index.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@editora/toast@latest/dist/toast.css">
// Basic usage
import { toast } from '@editora/toast';
import "@editora/toast/toast.css";
toast.success('Welcome to Editora Toast!', { theme: 'light', position: 'top-right' });
toast.error('Something went wrong!', { theme: 'light', position: 'top-right' });
toast.info('Here is some information', { theme: 'light', position: 'top-right' });Start with the fundamentals. Our toast system supports all standard notification types with beautiful, consistent styling.
Perfect for: User feedback, form validation, status updates, and general notifications.
// Simple API - Just call the method
toast.info('This is an info message', { theme: 'light', position: 'top-right' });
toast.success('Operation completed!', { theme: 'light', position: 'top-right' });
toast.warning('Please check your input', { theme: 'light', position: 'top-right' });
toast.error('Failed to save data', { theme: 'light', position: 'top-right' });
// Backward compatible with v1.x
import { toast } from '@editora/toast';
import "@editora/toast/toast.css";Your existing v1.x code continues to work without changes. Upgrade seamlessly!
Choose from 13 professionally designed themes. Each theme is carefully crafted for different use cases and brand requirements.
Themes can be set globally or per toast. Perfect for applications that need different notification styles for different contexts.
// Set global theme
toast.configure({
theme: 'dark'
});
// Override per toast
toast.success('Success!', { theme: 'neon' });
// Available themes:
const themes = [
'light', 'dark', 'colored', 'minimal',
'glass', 'neon', 'retro', 'ocean',
'forest', 'sunset', 'midnight', 'spring', 'autumn'
];Each theme is designed to work seamlessly with modern design systems and can be easily customized to match your brand.
Position toasts anywhere on screen. Perfect for different UI layouts and user preferences.
Perfect for: Adapting to different screen layouts, user preferences, and application contexts.
Choose from 9 different animation types. Each animation is optimized for performance and user experience.
// Set global animation
toast.configure({
animation: { type: 'spring' }
});
// Or per toast
toast.success('Animated!', {
animation: { type: 'bounce' }
});Modern mobile-first interaction. Users can swipe toasts in any direction to dismiss them. Perfect for touch devices and desktop users alike.
Click a button below, then swipe the toast in the specified direction to dismiss it.
๐ก The toast will move slightly as you drag to provide visual feedback
Swipe gestures provide an intuitive way to dismiss notifications, especially on mobile devices. Our implementation supports all swipe directions and provides smooth visual feedback.
// Enable swipe globally
toast.configure({
swipeDismiss: true,
swipeDirection: 'any' // 'left', 'right', 'up', 'down', 'horizontal', 'vertical', 'any'
});
// Or per toast
toast.info('Swipe to dismiss', {
swipeDismiss: true,
swipeDirection: 'horizontal'
});Restrict swipe directions to match your UX requirements. Perfect for different contexts.
Works seamlessly on touch devices and desktop with mouse interactions.
Visual feedback during swipe provides clear indication of the interaction.
Beyond basic toasts - explore powerful features for complex use cases.
Fine-tune the toast behavior to match your application's needs.
// Comprehensive configuration
toast.configure({
// Positioning (7 options available)
position: 'bottom-right', // 'top-left', 'top-center', 'top-right',
// 'bottom-left', 'bottom-center', 'bottom-right', 'center'
// Timing
duration: 4000, // Auto-dismiss after 4 seconds
maxVisible: 5, // Maximum visible toasts
// Appearance
theme: 'light', // 13 themes available
animation: { type: 'spring' }, // 9 animation types: 'spring', 'bounce', 'slide',
// 'zoom', 'flip', 'fade', 'elastic', 'rotate', 'custom'
// Interactions
pauseOnHover: true, // Pause on mouse hover
pauseOnFocus: false, // Pause on focus
swipeDismiss: true, // Enable swipe to dismiss
swipeDirection: 'any', // Swipe direction control
// Internationalization
rtl: false, // Right-to-left support
// Accessibility
enableAccessibility: true
});Editora Toast is built with accessibility in mind. All toasts are screen reader friendly, keyboard navigable, and follow WCAG guidelines.
Proper ARIA labels, roles, and live regions for screen readers.
Full keyboard support for dismissing and interacting with toasts.
All themes meet WCAG contrast requirements for accessibility.
RTL support and proper text direction handling for global applications.
Test form validation with different toast responses. Try submitting with missing fields or invalid data.
Simulate a notification center with different types of system notifications.
Complex progress tracking with multiple stages and real-time updates.
Toasts with multiple action buttons, forms, and complex user interactions.
Different error types with appropriate toast responses and recovery options.
Promise-based operations with loading states and success/error handling.