Toast Notifications
Context
- When displaying temporary notifications to users
- For success, error, or informational messages
- For async operation feedback
- DO NOT overuse toasts, follow the standard UX patterns
Requirements
- Import toast from 'sonner' package
- Use toast.promise() for async operations with loading/success/error states
- Use direct toast methods for immediate notifications
- Keep messages concise and informative
Examples
toast.promise(promise, { loading: 'Operation in progress...', success: 'Operation successful!', error: 'Operation failed.', });