Toast
The toast component is a lightweight notification element that appears temporarily to provide feedback or updates to the user. It is commonly used to communicate non-critical information, such as success messages, warning alerts, or brief updates.
- Keep messages concise and clear to ensure quick readability.
- Position toasts in the bottom-right to avoid obstructing main content.
- Display no more than 5 toasts simultaneously to avoid overwhelming users.
- Maintain a consistent visual style and placement for all toasts across the application.
Toasts can be categorized based on their purpose:
| Semantic | Description |
|---|---|
| Default | Used for neutral messages or general notifications. (ie. Settings have been updated.) |
| Info | Displays general information or updates. (ie. New message received. Check inbox. - New update available. Download now.) |
| Warning | Indicates successful completion of an action. (ie. Operation successful. Changes saved. - Profile updated successfully.) |
| Success | Provides cautionary advice without blocking actions. (ie. Unstable connection. Proceed with caution.) |
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 positions allows users to receive notifications without them 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).