Allows you to convey quick messaging notifications to the user. E.g When an action is completed, a success toast notification can be displayed and dismissed by the user or dismissed after a set amount of time has passed. Alternatively, a CTA can be used with the toast to allow the user to proceed with next steps or try again
Icon (situational): Used as a supporting element for the notification,
giving more context to the nature of the notification.
Title: Name of the toast letting users know what the toast is about.
Close icon (situational): Used when you are not using time-based toasts.
This allows users to manually dismiss the toast
CTA (situational): Used to allow users to carry out actions immediately upon completion of a task.
Within the toast
Ensure that there is a min of 16px spacing within the toast notification and 32px spacing between content and CTA.
Toasts should be used:
When you want to present quick snippets of information to users.
Such as when users have submitted a form sucessfully or when a system error occurs.
Toasts should not be used:
When conveying important alerts. E.g If your system is going down for maintenance.
Don’t stack the notifications
Avoid stacking multiple toasts together as this will cause confusion for users.
If stacking cannot be avoided, ensure that the toasts are of a similar nature. E.g Error messaging.
Make sure they are small and unobtrusive
This is so that content is not blocked and is part of the users natural task flow
Make toasts as brief as possible
Toasts convey quick snippets of information and therefore should not contain more than 2-3 lines of text.
The content should make sense with as little words as possible. E.g Message sent vs Your message has been sent.