Toast

Toasts are brief and small messages that overlay the surface. They don't block the user's flow, as they are out of the way and ephemeral. Toasts don't require user action and primarily acknowledge that a user has performed an action or completed a task.

also known as Snackbar

an example of toast

Usage guidelines

When to use
  • Briefly acknowledging a user action without interrupting their flow.
  • When acknowledging an action that relates to another surface, provide a link that navigates the user to that surface.
  • To undo actions after acknowledgement, if there isn't already a way to do so on the current surface.
  • For system processes like showing that a process is loading, or when there are internet connectivity issues.
When not to use
  • When, due to an error, a user can't even continue performing basic tasks like browsing already-loaded Pins.
  • When asking a user to confirm that they want to perform an action. Use Sheet instead.
  • When you want to suggest a user spend more money or try new features, use BannerUpsell instead.
  • For errors that relate to a specific section or page. Use BannerCallout or BannerSlim instead.
  • To guide or educate the user. Use Popover or Tooltip instead.

Best practices

example with toast with unblocking placement
Do

Place Toasts out of the way so that a user can still navigate and complete tasks. Keep a top or bottom margin that's the same size as the left and right margins.

example of with blocking placement
Don't

Block navigation controls with Toasts or align too close to the edge of a navigation bar.

example of showing one toast
Do

Show one Toast at a time, with errors and acknowledgements taking priority.

example of showing multiple toasts
Don't

Stack multiple toasts as that'll block the user.

example of a dismissible toast
Do

Include a way to dismiss the toast when it is actionable or contains multiple lines of text. Mobile toasts can be dismissed via swiping up if placed on the top or down if placed on the bottom.

example of leaving a toast on screen
Don't

Leave toasts on screen for a long time without a way to dismiss. Exceptions are blocking error toasts where a user can't act until the error is resolved.

Accessibility

People use Android’s accessibility features, such as TalkBack and dynamic text sizing to personalize how they interact with their devices. Supporting these personalizations ensures that everyone has a great user experience. See Material Design and development documentation about accessibility for Android:

Accessbile design on Android


Accessible development on Android
, Opens a new tab

Duration

Some people may take longer to read toasts than others due to low vision or cognitive impairments. Use the guide below to set the duration for Toasts:

  • Brief text of about 10–15 words (including button text): five seconds
  • Longer than 15 words: Slow readers can read about 125–200 words per minute. Base your duration on the slowest number. For example, a toast with 20 words should be set to 10s. Source
    , Opens a new tab

Design tokens

Use these tokens for applying size and color styles to Toast.


Anatomy


Variants

Default type

A generic acknowledgment after an action is taken.

default toast

Error type

Used rarely for connection issues or unknown errors. We don't want to completely block the users flow, but we want the message to persist if the user goes to another surface. It is recommended that this variant provides a way to solve the error or get help.

error toast

Text only

A simple, generic acknowledgment after an action is taken. These shouldn't be actionable.

text only toast

Image

With an image for Pin or board actions.

toast with image

Avatar

With an Avatar for Profile or Pinner-related messaging. An optional link can be included. When there's a link on mweb, the entire toast is tappable, using TapArea.

toast with avatar

Toast with button

As a secondary element, to drive users to another surface, or change a recently completed action.

toast with button

As a secondary element, to drive users to another surface.

toast with link

Placement

Placement is always centered at the top or bottom of the screen and not blocking any navigation or important buttons.

Writing

Do
  • Consider internationalization and how other languages may take up more space
  • Be brief and concise
  • Use conversational language
Don't
  • Use lengthy, technical jargon or local idioms that'll be hard to translate to other languages