Toast
A Toast component is a transient notification that appears on the screen to provide feedback or information to users without interrupting their workflow. Typically displayed at the top or bottom of the screen, toasts are brief messages that automatically disappear after a short duration. They are commonly used to inform users about actions such as successful submissions, updates, or alerts, enhancing the overall user experience with minimal disruption.
# Demo
Basic Toast Examples
Simple toast notifications for basic user feedback and information display.
Toast Types
Different toast types for various message contexts and user feedback scenarios.
Action-Based Toasts
Toast notifications triggered by specific user actions and operations.
System Notification Toasts
System-level notifications for device status, connectivity, and hardware updates.
E-commerce Toasts
Shopping and transaction-related notifications for e-commerce applications.
User Interaction Toasts
Social interactions and user engagement notifications for community features.
Special Occasion Toasts
Celebratory and promotional notifications for special events and achievements.
Theme Toggle Toasts
Theme switching notifications for dark/light mode toggles and UI preferences.
Toast Best Practices
✅ Do's
- • Use appropriate toast types for different messages
- • Keep messages concise and actionable
- • Provide clear success/error feedback
- • Use consistent timing for similar actions
- • Include relevant icons for better recognition
- • Position toasts where they won't block content
- • Make toasts dismissible when appropriate
- • Use proper contrast for accessibility
❌ Don'ts
- • Don't show too many toasts simultaneously
- • Don't use toasts for critical error messages
- • Don't make toast messages too long
- • Don't use toasts for complex interactions
- • Don't ignore mobile responsiveness
- • Don't use toasts for permanent information
- • Don't forget to handle toast stacking
- • Don't use unclear or confusing messages
Toast Activity Summary
Recent Toast Notifications
0
Total Toasts
0
Success
0
Errors
0
Warnings
No toasts triggered yet. Try clicking the buttons above to see toast notifications!
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| description | string | Required | Toast message description. |
| title | string | Optional | Toast title. |
# Tags