A toast is a small layered banner used to deliver immediate ephemeral feedback.
Use toasts to deliver a timely, straightforward message. If you’re providing a ton of detail on something not immediately relevant, this isn’t the interjection for you.
We have four different toasts to align with our Feedback Icons and Utility Colors.
The Information toast presents neutral information. Use this if effects aren’t immediate. For example, if time or another user is required to complete the action.
The Success toast confirms the user’s action has been completed. Keep the message content positive.
A Warning toast calls attention to important information that doesn’t require additional action, but also won’t prevent the user from taking further action.
Use this to give the user a heads-up to possible future problems.
The Critical toast is used for major errors, vital information and potentially damaging actions. When there’s a risk of data loss, use this type.
This toast will never auto-dismiss—the user must acknowledge it. Be as straightforward as possible to explain the issue and its urgency. Whenever possible, offer an immediate action to resolve the problem.
Use Utility Colors for Critical, Warning and Success icon containers. Information toast backgrounds are Dark Environment BG Level 3.
Toasts always appear in the lower right corner of the interface.
For the time being, stick to displaying one toast at a time.
All toasts appear at 100% and immediately fade to 90% for a four-second hold. Following the hold, toasts fade out over three seconds, at which point they become auto-dismissed.
The auto-dismiss timeline gives users a full seven seconds to hover and view the toast at 100%.
Critical toasts do not auto-dismiss. We intentionally force the user to acknowledge the problem.
While a Dismiss is required on all toasts, they can also include one additional action styled as a small Subtle button.
Limit the action to a single verb, ideally one of the following five: Undo, Retry, View, Share or Learn More.
All Critical toasts require an action in addition to Dismiss, likely Learn More. Help the user understand whatever warranted the toast and provide a path forward.
Keep the content readable at a glance—no more than 60 characters long. Put keywords at the front.
Given a toast’s size and the scope of information provided, it should never have a title.
A Sketch file with with UI elements used to design Hudl interfaces.