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.

Toasts Information


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

Toasts Success


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


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


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.


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.


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.


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


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.