Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Toasts
Toast notifications are lightweight, non-intrusive alerts that provide timely feedback to users. They are perfect for displaying success messages, warnings, or important updates without disrupting the user experience. Toasts can be customized with different styles, positions, and interactive elements to suit your application's needs.
Basic Example
A standard toast notification featuring an icon, title, timestamp, and dismissible button. This example demonstrates the basic structure and essential elements of a toast message.
Live Demonstration
Click the button below to trigger a toast notification. This interactive example shows how toasts can be programmatically displayed in response to user actions.
Translucent Toast
A semi-transparent toast that blends with the background while maintaining readability. Perfect for creating a subtle notification that doesn't overwhelm the interface.
Stacking Toasts
Multiple toasts can be stacked in a container, automatically arranging themselves vertically. This pattern is useful when multiple notifications need to be displayed simultaneously.
Custom Toasts
Simplified toast variant with minimal styling, perfect for quick status updates or simple messages.
Interactive toast with action buttons, ideal for prompting user decisions or responses.
Color Schemes
Toasts can be styled with different background colors to indicate various message types or
importance levels. Use utility classes like text-bg-primary,
text-bg-success, or text-bg-danger
to create contextual notifications.
Toast Placement
Toasts can be positioned anywhere on the screen using Bootstrap's position utilities. Common placements include top-right, bottom-right, or center of the viewport.
Center-aligned toast using Flexbox utilities, useful for important messages that need to capture the user's attention.
Advanced Toast Examples
Advanced toast implementations with auto-dismiss timers, progress indicators, and dynamic content updates for sophisticated notification systems.
Developer Tips & Best Practices
Pro Tips for Toast Notifications
- Timing & Auto-dismiss: Use appropriate auto-dismiss timers - 3-5 seconds for success messages, longer for important warnings
- Position Strategy: Place toasts in consistent locations (top-right or bottom-right) to build user expectations
- Content Hierarchy: Use clear, concise messaging with appropriate icons and colors to convey urgency and context
- Stacking Limits: Limit visible toasts to 3-5 maximum to prevent screen clutter and cognitive overload
- Action Integration: Include relevant action buttons for actionable notifications (retry, undo, view details)
- Responsive Behavior: Ensure toasts work well on mobile devices with appropriate sizing and positioning
Common Pitfalls to Avoid
- Don't use toasts for critical information that users must see - use modals or inline alerts instead
- Avoid overly complex or lengthy content in toasts - keep messages brief and actionable
- Never auto-dismiss error messages - users need time to read and understand problems
- Don't stack too many toasts simultaneously - implement a queue system for better UX
- Avoid using toasts for form validation errors - use inline validation instead
- Don't forget to handle focus management and screen reader announcements for accessibility
JavaScript Integration Best Practices
Essential features for production toast systems:
- Queue management system for multiple notifications
- Auto-dismiss timers with pause on hover functionality
- Progress indicators for long-running operations
- Theme and position customization options
- Keyboard navigation and focus management
- Integration with application state management
Accessibility Guidelines
Ensure toast notifications are accessible to all users by following these best practices:
- Use proper ARIA attributes: role="alert", aria-live="assertive", aria-atomic="true"
- Provide sufficient color contrast for all text and background combinations
- Include descriptive text that works without relying solely on color or icons
- Ensure keyboard navigation works for dismissing and interacting with toasts
- Implement proper focus management when toasts appear and disappear
- Use appropriate timing that allows users to read and understand content
- Provide alternative methods for critical information beyond just toasts
On this page