IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Toast

/

Design

Briefly display instant feedback in a layered banner.

Use toasts to deliver a timely, straightforward response to an action.

IconWarning
Version 5+
If using Uniform Version 5 or later, please refer to our Storybook docs for the Toast documentation and examples.

If the message would be more effective before the task, consider a notice or note instead.

Type

Information: The information toast presents a neutral update. Use this if effects aren’t immediate, like if time or another user is required to complete the action.

States

Web

All toasts appear at 100% and immediately fade to 90% for a four-second hold before automatically dismissing with a three-second fadeout.

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

Critical toasts do not auto-dismiss. We need the user to acknowledge the problem being communicated.

Apple

Toasts will auto-dismiss after three seconds if you choose to make it timed. If you don’t, the toast must be deliberately dismissed with a single tap or swipe.

Usage

Feedback

Every toast provides a certain type of feedback, emphasized by a color and feedback icon.

Don't interchange feedback colors and icons.

Don'tinterchange feedback colors and icons.

Do match feedback to the message type.

Domatch feedback to the message type.

Action Buttons

A dismiss is included on all toasts, but you can also include one additional action styled as a small subtle button.

Don't add an irrelevant action just to have one.

Don'tadd an irrelevant action just to have one.

Do make the action a clear next step relevant to the content.

Domake the action a clear next step relevant to the content.

All critical toasts require an action, usually Learn More.

Don't abandon the user to solve the problem themselves.

Don'tabandon the user to solve the problem themselves.

Do help them understand what went wrong and offer a solution.

Dohelp them understand what went wrong and offer a solution.

Position

Position is handled for you, regardless of platform. On web, the toast will appear in the bottom right corner. On Apple, it’s positioned along the top of the screen.

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

Microcopy

Case & Punctuation

Toasts follow the non-label text guidelines. They use sentence case with appropriate punctuation.

Don't yell at the user with caps lock or crazy punctuation.

Don'tyell at the user with caps lock or crazy punctuation.

Do use complete sentences followed by a period.

Douse complete sentences followed by a period.

Content Length

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

Don't overwhelm the user with too many details.

Don'toverwhelm the user with too many details.

Do keep things brief with only the most important info.

Dokeep things brief with only the most important info.

Titles

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

Don't take up valuable real estate with unnecessary copy.

Don'ttake up valuable real estate with unnecessary copy.

Do load the content with keywords to make scanning easy.

Doload the content with keywords to make scanning easy.

Action Buttons

Try limiting the action to a single verb, ideally one of the following five: Undo, Retry, View, Share or Learn More.

Don't make button labels complete sentences.

Don'tmake button labels complete sentences.

Do keep things simple with a single verb.

Dokeep things simple with a single verb.

Accessibility

Audit Results

See our full accessibility audit for more information about these results.

PlatformVisualInteractiveAutomatedDetails
ReactIconConfirmation PassIconConfirmation PassIconConfirmation Pass
React NativeIconWarning WarningIconCritical ViolationsIconWarning N/A
  • IconWarningAnimation is not disabled if user sets reduced motion preference. (AAA)
  • IconCriticalThe accessibilityLabel prop should be used on the dismiss button since the icon contains no text.
  • IconWarningAt least one variation of this component does not meet the 44px touch target standard. (AAA)

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.