Toast

Toasts are brief, auto-expiring notifications that appear temporarily at the bottom or top of the screen to provide feedback on user actions or system events.

Overview

Toasts convey short, time-sensitive messages that are relevant to a specific action or event, ensuring users get the right information at the right time without permanent visibility.

When to use

• Use to provide quick feedback after user actions, such as saving a form or completing a task, without requiring further user interaction.

• Use to notify users about the success or failure of background processes, such as file uploads or system updates, in a non-disruptive way.

• Use to display impermanent information, like confirmations or status updates, that don’t require users to stop their current workflow.

• Use to inform users of temporary issues, like connection errors or system delays, allowing them to continue while being aware of the situation.

• Use to indicate task completion for actions such as sending messages, processing transactions, or other quick processes where immediate feedback is beneficial.

When not to use

• Avoid for critical, high-priority alerts that require immediate user attention or actions, as toasts may be missed or dismissed too quickly.

• Avoid using toasts for displaying complex or detailed information that would be difficult to convey in a brief message format.

• Avoid when the notification must remain on the screen until the user explicitly dismisses it, as toasts are designed to disappear automatically.

• Avoid showing multiple toasts in rapid succession, as this can overwhelm users and cause them to miss important information.

• Avoid relying on toasts for vital messages that are essential to user progress, as they can be missed due to their temporary nature.

States

Anatomy

1. Status Icon: A visual indicator representing the toast's status.

2. Title: A concise headline providing context for the toast.

3. Container: The outer frame of the toast that holds all content elements together.

4. Dismiss Icon: A clickable icon to close or remove the toast manually.

5. Description: Brief message providing additional details about the toast's purpose or context.

6. Progress Bar (Optional): A visual element indicating the progress level related to the toast’s context, or indicating how long the toast will remain visible before auto-dismissing.

7. Actions (Button Group): Optional buttons that allow users to take immediate action based on the toast's content, such as retrying an operation.

Size

Size	Title (px)	Description (px)	Icon (px)	Corner (px)	Container Height (px)
Default	16	14	24	12	75

Accessibility

• Screen Reader Alerts: Toast messages should be announced by screen readers to ensure visually impaired users are alerted to notifications.

• Focus Management: Make sure that the toast doesn't steal focus from users when it appears, allowing seamless interaction with the rest of the interface.

• Sufficient Time to Read: Ensure toasts are displayed long enough for users to read them, considering different reading speeds and abilities.

• Keyboard Dismissal: Provide keyboard accessibility for dismissing toasts, with an easily focusable dismiss icon or button.

• Avoid Auto-Dismiss for Important Content: Ensure that users can manually dismiss toasts containing critical information rather than auto-dismissing them too quickly.

Example

• Save Confirmation: Show a toast when users save their changes successfully in a document or settings page.

• Error Notification: Display an error toast when a user encounters an issue submitting a form or processing a payment.

• Success Messages: Notify users when an operation, such as profile update or content publishing, has been completed successfully.

• Information Alerts: Use a toast to let users know about low battery or connectivity issues that they should address.

• Temporary Warnings: Warn users about non-critical issues such as missing fields or incomplete forms before they proceed with an action.