- Guidelines
- React API Reference
- Blazor API Reference
Toast notifications provide brief, contextual feedback about user actions or system events, appearing temporarily to communicate information without interrupting the user’s workflow.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use for confirming actions, showing status updates, or alerting users to important information that doesn’t require immediate attention. |
| Content | Keep messages concise and actionable. Use clear, specific language that tells users what happened or what they need to know. |
| Behavior | Appear automatically, stay visible briefly, and dismiss themselves. Allow manual dismissal for important messages. |
| Timing | Display for 3-5 seconds for informational messages, longer for error messages that may require action. |
| Positioning | Position consistently (usually top-right or bottom-right) to establish user expectations for where notifications appear. |
| Examples | Form submission confirmations, save notifications, error alerts, connection status updates, or undo action prompts. |
Best Practices
- Appropriate Timing: Use auto-dismiss for confirmations, persistent display for errors requiring action.
- Clear Messaging: Write messages that clearly communicate what happened and any required user action.
- Consistent Positioning: Keep toast position consistent throughout the application.
- Avoid Overuse: Don’t overwhelm users with too many notifications; combine or prioritize when possible.
- Actionable Content: Include relevant actions (like “Undo” or “View Details”) when appropriate.
- Accessibility: Ensure toasts are announced by screen readers and can be accessed via keyboard.
Do’s and Don’ts
Do
- Use for brief, contextual feedback about user actions.
- Keep messages concise and easy to scan quickly.
- Provide dismiss buttons for important or error messages.
- Position consistently within the application.
Don't
- Use for critical information that requires immediate attention.
- Display too many toasts simultaneously.
- Use for complex information that needs careful reading.
- Block user interaction with the main content.
Additional Guidance
- Psychological Impact:
- Non-Intrusive Feedback: Toasts provide information without forcing users to stop their current task.
- Confidence Building: Confirmation toasts help users feel confident their actions were successful.
- Status Awareness: Keep users informed about background processes and system state changes.