Toast notifications communicate acknowledgements and alerts that require minimal user interaction. Toasts appear fixed to the top right corner of the screen. It has a fixed width of 375px.
Toast notifications are used when:
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.
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.
Communicates the success of an operation, e.g. a long-running process has finished. These are often paired with an info toast.
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.
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.
0–2 actions can be added to each Toast. Action styling is predefined as one primary and one secondary action.
In general, toast should be dismissible. Important, persistent events are the general exception.