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.

Success

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

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.

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.

---

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.

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.

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.

---

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.

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.

---

Additional Guidelines

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.

---

Implementation

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

---