Usage guidelines
- 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, 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.
Best practices
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.
Block navigation controls with Toasts or align too close to the edge of a navigation bar.
Show one Toast at a time, with errors and acknowledgements taking priority.
Stack multiple toasts as that'll block the user.
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.
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 Apple’s accessibility features, such as reduced transparency, VoiceOver, and increased text size to personalize how they interact with their device. Supporting these personalizations ensures that everyone has a great user experience. See Apple’s Human Interface Guidelines and documentation about accessibility for iOS:
Accessible design on iOS
Accessible development on iOS
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.
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.
Text only
A simple, generic acknowledgment after an action is taken. These shouldn't be actionable.
Image
With an image for Pin or board actions.
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.
As a secondary element, to drive users to another surface, or change a recently completed action.
Toast with link
As a secondary element, to drive users to another surface.
Placement
Placement is always centered at the top or bottom of the screen and not blocking any navigation or important buttons.
Writing
- Consider internationalization and how other languages may take up more space
- Be brief and concise
- Use conversational language
- Use lengthy, technical jargon or local idioms that'll be hard to translate to other languages