Toasts

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.


Types

We have four different toasts to align with our Feedback Icons and Utility Colors.

Information

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.

Toasts Information

Success

The Success toast confirms the user’s action has been completed. Keep the message content positive.

Toasts Success

Warning

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.

Toasts Warning

Critical

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.

Toasts Critical


Style

Toasts Style

A toast’s container is Light Environment Bg Level 0 with a Shadow 2 in both Light and Dark Environments.

Use Utility Colors for Critical, Warning and Success icon containers. Information toast backgrounds are Dark Environment BG Level 3.


Position

Toasts always appear in the lower right corner of the interface.

Toasts Position

For the time being, stick to displaying one toast at a time.


States

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.

Toasts Auto-Dismiss

The auto-dismiss timeline gives users a full seven seconds to hover and view the toast at 100%.

Toasts Auto-Dismiss Hover

Critical toasts do not auto-dismiss. We intentionally force the user to acknowledge the problem.


Actions

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.

Toasts Action

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.

Toasts Critical Action


Additional Guidelines

Keep the content readable at a glance—no more than 60 characters long. Put keywords at the front.

Toasts Message

Given a toast’s size and the scope of information provided, it should never have a title.

Toasts Title


Implementation

To implement toast styles for the web, visit Uniform UI. For toasts as React components, head to Uniform-UI-Components GitHub.


Uniform UI Elements

A Sketch file with with UI elements used to design Hudl interfaces.