Toast
Quick, small notifications that appear in the top right corner of the page. These notifications can automatically disappear after five seconds, or be dismissed by the user.
- Overview
- Specs
- Guidelines
Component
Toasts are messages that provide short, temporary information to the user, giving feedback on an action taken. They inform users of a process that an app has performed or will perform.
This format is characterized by quick, short messages that slide across the top right of the page.
There are two main variations of this component:
- Closable: the toast disappears at the end of the timer or when the user clicks on the close button;
- With action: it has a button, but the button is not closable, it requires a user action to close it.
A: Closable
B: With Action
1:- Timer
2: Label
3: Close
4: Action
Used for:
Informative
designed to provide users with important updates, announcements or relevant information within the interface or platform.
Positive
Notifies users when they have successfully completed an action or task, such as submitting a form or completing a transaction, improving the user experience and providing immediate feedback.
Alert
Warns users of critical information, warnings or errors, ensuring they are informed of important updates or issues in a timely manner.
Negative
Alerts users of errors, unsuccessful actions or critical issues, facilitating immediate user awareness and potentially leading to corrective action or resolution.
Insight
Provides users with valuable information, tips or suggestions to enhance their understanding or experience within the digital platform.
Don’t use for:
Sensitive or confidential information
Avoid using toast components to display sensitive or confidential information, such as passwords, personal identification numbers (PINs) or financial details, as it may be visible to unintended users.
Legal notices
It’s not appropriate to display legal notices, terms of service updates, or privacy policy changes, as these often require explicit consent or more prominent display to ensure users are adequately informed.
Emergency alerts
Should not be used for emergency or critical alerts, such as natural disasters or security breaches, as they may not attract sufficient attention or urgency from users.
Long-form content
Toast components are intended for short messages or notifications; therefore, they should not be used to display long content such as articles, user agreements, or detailed instructions, as users may not have sufficient time or space to digest the information effectively.
Overuse
It’s not advisable to use toast components excessively or for trivial notifications, as this can lead to user annoyance, distraction and a cluttered interface, reducing their effectiveness in conveying important messages.
Demo
Access the Figma file and inspect element using Dev Mode.
Last Update
- Added progress-circle timer;
- Updated icons and colors;
- Closable and with action as separated variations;
- Left-border was removed;
- Toast title is no longer available.
