The toast component provides brief, non-intrusive notifications to users, appearing temporarily on the screen without disrupting their workflow. Typically used for system messages, confirmations, or alerts, toasts help communicate important feedback in response to user actions. They automatically disappear after a set duration but can also include manual dismissal options. By maintaining visibility without demanding immediate interaction, toasts enhance user experience while keeping the interface clean and efficient.
- 1.Container: the structural wrapper that holds all elements of the toast, defining its size, background, and layout while ensuring proper visibility within the interface.
- 2.Icon: an optional icon indicating the type of message (e.g., success, error, warning, info).
- 3.Text message: a short text message providing the main content of the toast.
- 4.Action: an optional button with quick and straightforward action like "Undo" or "View" depending on the context.
- 5.Close action: to allow manual dismissal of the toast.
A loading toast provides users with real-time feedback during an ongoing process. Instead of a static icon, a spinner is displayed to visually indicate that the process is still in progress. This toast remains visible until the process is complete, ensuring users are aware that the system is working. Once the task is finished, the loading toast will automatically disappear, and a follow-up toast will appear in the queue to confirm the outcome of the process.
Toasts should be positioned in a way that ensures they are easily noticeable without obstructing the main content or interrupting the user's workflow.
- Bottom-Right: Toasts are aligned to the bottom-right corner of the screen.
- Bottom-Center: On small devices, toasts are positioned in the bottom-center of the screen.
This position allows users to receive notifications without interfering with primary tasks or content.
Toasts should appear and disappear in a specific order to ensure clarity and consistency in user notifications:
- Order of appearance: Toasts appear in the order they are triggered. This means the newest toast will appear at the bottom of the stack. This ensures users see the most recent notification last, making it easier to track the sequence of events.
- Order of disappearance: Toasts disappear in the same order they appeared. This means the oldest toast will disappear first, maintaining a First In, First Out (FIFO) system. This order helps maintain a logical flow and ensures users have enough time to read each notification.
When multiple toasts appear on the screen simultaneously, it's important to manage their display to ensure they don't overlap and that each one remains visible and readable.
Key practices to ensure they remain effective and user-friendly:
- Stacking: Toasts are displayed in a vertical stack. New toasts are added to the stack in a consistent location (at the bottom).
- Offset spacing: Small gap between toasts to visually separate them (8px)
- Limit: Only 5 toast max. should be displayed at the same time.
- Sequential display: Display toasts one after another rather than all at once.
- Timing: Set a uniform duration for each toast to stay visible (3-5 seconds).
Toasts can be categorized based on their purpose:
| Semantic | Description |
|---|---|
| Default | Used for neutral messages or general notifications. (i.e.. Settings have been updated.) |
| Info | Displays general information or updates. (i.e. New message received. Check inbox. New update available. Download now.) |
| Success | Indicates successful completion of an action. (i.e. Operation successful. Changes saved. Profile updated successfully.) |
| Warning | Provides cautionary advice without blocking actions. (i.e. Unstable connection. Proceed with caution.) |
- Keep messages concise and clear: ensure toasts are easy to read at a glance by using short, direct language that conveys the message effectively.
- Avoid obstructing main content: position toasts in the bottom-right corner of the screen to keep them visible without interfering with the user's workflow.
- Prevent notification overload: display no more than five toasts at a time to maintain clarity and avoid overwhelming users with excessive messages. If additional notifications are needed, consider queueing them.
- Ensure consistency: use a uniform visual style, placement, and behavior for all toasts across the application to create a seamless user experience.
- Prioritize urgency and relevance: reserve toasts for important, time-sensitive information and avoid using them for non-critical updates that could be delivered through other means.
- Allow for manual dismissal when necessary: while toasts should disappear automatically after a set duration, providing a close button can improve accessibility and user control.