components / Status and Feedback

Toast

Usage

Toast notifications are used when:

  • The user does not need to be interrupted.
  • The user is being informed of an event, with the option to take action.
  • The results of an action are delayed.
  • The notification could appear anywhere in the application.

All notifications share the non-interruptive function. Banner notifications are tied to a specific view and are usually generated immediately after a save. Announcement notifications convey an app-wide event and not feedback on a workflow. Snackbar notifications are less-intrusive, concise messages that inform a user that an action has been completed.

Status Variations

Info (Default)

Communicates operational information to the user. These are commonly used to denote the start of an operation, and usually includes follow up notifications. A one-off acknowledgement notification could also be a Snackbar. If content in an area needs to be blocked with an operation, a loading mask could be used over the Info Toast.

Success

Communicates the success of an operation, e.g. a long-running process has finished. These are often paired with an info toast.

Critical/Error

Toast errors are when an operation was unable to be performed or has failed. Page-specific and form errors should utilize the Banner notification. When applicable, users should be able to take action on an operation.

Warning

Warnings are distinct from errors and represent issues that do not need an immediate resolution, but still need to be addressed. Unintended consequences in an operation and fallback choices are common examples. Users in general should be able to take action on a warning.


Actions

0–2 actions can be added to each Toast. Action styling is predefined as one primary and one secondary action.

Close Action

In general, toast should be dismissible. Important, persistent events are the general exception.