Toast alert

Toast alerts are designed to display concise non-critical messages such as an update, success state, warning, error or loading. They appear at the top and center of the display, just below the header nav.

Use to convey general information or confirmations that aren’t ciritcal.

Use to indicate that something was successful.

Use to display information that needs attention or that users need to action on before something goes wrong

Use to inform users that something has gone wrong. Reserve it for errors not caused by the users such as a connectivity issue.

Use to show users that something is currently loading

Non-Closeable and Closeable Toasts
Allowing users to close toasts banner could provide a better user experience, eitherway, toasts should automatically disappear within 10 seconds

Light and Dark color variants
Use light toast when the background it will appear over is dark. Use dark toast when the background it will appear over is light

Toast with Action Link
Only include an action in toast if the same action is available elsewhere on the page. Keep the action label short, preferably 1 verb. For example: give users the option to Undo when they have done something like deleting an image.

Toast copy should be a short, concise and informative sentence
Please keep in mind translations when you are writing your toast copy +/- 20 characters.

Toasts shoud rarely be used for error messages (Use Error and Critical Banners instead)
Reserve toasts for errors that are not caused by the users such as connectivity issue or backend issues. Use banners for other types of errors and error validation for input fields error.