Toast messages let users know that the task they just performed was successful. These messages give users immediate feedback after taking some action. Users don’t need to dismiss toast messages, as they appear only for a moment before they disappear.
Use a toast
- For frequent confirmations, such as successful completion of a task or transaction.
- When it’s not critical for the user to read the message.
Appearance and behavior
- The toast message features a green glyph.
- The message slides down from the top of the window.
- Although the message will automatically disappear after a few seconds, users can also dismiss it if they want.
- When the user “saves and closes,” the toast message appears on the parent page.
- When the user “saves and new,” the toast displays on the trowser.
- The message disappears after two or five seconds, depending on the length of the content.
- Max width 460px, Content padding 16px
On mobile devices, toast messages take up the full width of the screen.
Content guidelines for toast messages
You’ve heard people say no one reads online. That’s usually true when it comes to toast messages. These messages quickly tell users that what they just did is OK. Users might read the message the first time it appears, but usually they’ll just scan over it and move to the next thing they want to do.
Here are some tips for how to write useful toast messages:
- Keep it brief and straightforward. These messages disappear in about two to five seconds. And users can dismiss them even faster than that. If your message wraps to three lines, it’s probably too long. In that case, work with a design partner to see if another message pattern might be better for the content.
- Use the boldface copy thoughtfully.
- You can choose to bold key phrases in a toast message. For a confirmation of a completed transaction, make the name of the transaction bold.
- Collaborate with your design partner to determine if the bold copy is most effective at the beginning or end of the message.
- Limit the boldface words to two or three; more than that might be hard to read and clutters the interface.