State specific results
Information that needs to be decided or corrected should be longer than the toast.
Toast Design system
Short feedback after action without blocking work.
Checklist contents
Review progress
01
Structure and meaning
Compare information and presentation in context of use.
02
Interaction and usability
Try the operation, change the status and continue working.
03
Complete the experience
Check for details that are easy to miss when putting the design into use.
Progress is saved automatically in this browser.
GUIDANCE
How to review
EXAMPLES
Usage examples
State specific results
“3 items moved to archive” with “Undo” button.
Variants and use cases
Act fast
Place useful actions in the toast when the user can edit or move on now.
Use the keyboard to press undo before the toast disappears; state must be restored.
Example After storing the document, the toast has an Undo button.
Changes saved
Changes saved
Changes saved
Status icon
The icon identifies the result, but the text content must clearly state the task that occurred.
Hide icon and read toast; Users still distinguish a successful save from a failed send.
Example “Draft saved” comes with a confirmation stamp.
Changes saved
Please check the information.
The position does not cover the operation
Place the toast in a visible place without covering the main button, keyboard or reading area.
Open keyboard and mobile navigation bar; toast must be readable.
Example Toast is located on the mobile tabbar with a safe area.
Changes saved
Display time
Allow enough time to read; Information that needs processing or has a node should not disappear too soon.
Give focus to the toast action; The closing deadline needs to be stopped or there is a way to review it.
Example Undo Toast retains when the user is focusing the Undo button.
Changes saved
A brief notice that does not interrupt the current task.