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.

When to use toast messages

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 se ctive 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.
  • Was this Helpful?