Error Messages in Toasts

In O3DE, toasts are non-disruptive notifications that are displayed ovre most elements in a page on the bottom-right corner of the window. They are non-distruptive because they can be displayed in the middle of a user’s workflow without hindering the user’s actions.

The following example demonstrates a toast that appears at the bottom-right corner of the O3DE Animation Editor window.

Example of a floating toast in the O3DE Animation Editor

Using standard icons

Toasts convey the message’s intent and must correspond with an appropriate icon to provide a consistent experience for the users. The following image shows toasts of different message intents: error/failure, warning, success, and information.

Refer to the following table to determine what icon to use in your toast, depending on the message’s use case.

Floating Toasts - Decision Table

Example

Floating Toasts - Messages

Specifications

Review these specifications when creating a toast:

  • Toasts are passive and non-disruptive messages. They shouldn’t hinder the user’s workflow.

  • Write clear and concise messages. Toasts can show only up to two lines.

  • Toasts must disappear after three seconds (or a maximum of five seconds). An exception is if the message includes a link that requires the user to take action for the toast to disappear.

  • Don’t stack multiple toasts such that they are side-by-side vertically or horizontally, as this may block the user’s workflow. Instead, display multiple toasts sequentially and in order of importance.

  • Use one of the following icons from the list of Standard icons : error/failure, warning, success, or information icon.

  • The toast must have a fixed width and should not expand to fit the content area.

  • Toasts cannot contain a call-to-action button.

  • Toasts must appear above page content and on a screen where overlay layers are appropriate.

  • Toasts must not be used within a modal. Consider using them within larger systems like O3DE Editor, Material Editor, Viewport, and so on.

Floating Toast Messages - Best Practices

UI dimensions

PropertySpecification
Icon Size24 x 24px
Padding12px
Border Radius6px
FontOpen Sans
Weight400
Line Height16px

Floating Toast, marked up

Toasts that contain links in the subtitle text must do the following:

  • Persistantly display and don’t automatically disappear, unlike a standard toast.

  • Display a manual close button.

  • Point outside the system, not to another part of the application as this might disrupt the user’s workflow. For example, you can link to an external web address: “Check out tutorials on how to create a material here, <link>.”

Floating Toasts - Messages with Links


Copyright © 2022 Open 3D Engine Contributors

Documentation Distributed under CC BY 4.0.
For our trademark, privacy and antitrust policies, code of conduct, and terms of use, please click the applicable link below or see https://www.lfprojects.org.


The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our Trademark Policy page.