Toasts can educate people on the content of the screen, provide confirmation when people complete an action, or simply communicate a short message.

Toast is purely visual. In order to properly handle the showing and dismissing of Toasts, as well as any animations, you will need to implement a Toast manager.

also known as Snackbar

Toast is under an experiment to update its visual design: spacing, elements sizing, and a new error Icon for variant='error'. Visit the Pull Request to learn more.
; Opens a new tab
Figma:

Web:

iOS:

Android:

Props

Component props
Name
Type
Default
text
Required
string | React.Element<typeof Text>
-

Main content of Toast. Content should be localized. See the Text variant to learn more.

primaryAction
{|
  accessibilityLabel: string,
  href?: string,
  label: string,
  onClick?: $ElementType<React$ElementConfig<typeof Button>, "onClick">,
  rel?: $ElementType<React$ElementConfig<typeof Link>, "rel">,
  size?: $ElementType<React$ElementConfig<typeof Button>, "size">,
  target?: $ElementType<React$ElementConfig<typeof Link>, "target">,
|}
-

Adds an optional button for user interaction. Generally not recommended given the ephemeral nature of Toasts.

thumbnail
React.Node
-

An optional thumbnail image to displayed next to the text.

thumbnailShape
"circle" | "square"
-

The masked shape of the thumbnail.

variant
"default" | "error"
-

Use the 'error' variant to indicate an error message. Generally not recommended given the ephemeral nature of Toasts.

Usage guidelines

When to use
  • Displaying non-critical feedback on the result of an action.
  • Reinforcing success at the surface level.
When not to use
  • Providing an update related to anything other than confirmation of a successful action. Consider a Callout instead.
  • Presenting mandatory and/or critical actions to a user.
  • Displaying feedback at the element level (e.g., entered password doesn't meet requirements). Use inline text instead.

Accessibility

Localization

Remember to localize text and any string within primaryAction.

Variants

How to display

Toasts should be displayed in the center of the viewport, opposite the main navbar (e.g. at the top of the viewport on mobile, bottom of the viewport on desktop). Though not implemented here, Toasts are meant to be ephemeral and disappear after a few seconds.

Text

The text prop accepts either a string or Text. Use a string for guide toasts without any visual style. Toast will handle the text style and adherence to design guidelines.

If confirmation toast's text with more complex style is required, such as bold text or inline links, use Text to wrap your message with any additional Text or Link usages contained within. When passing in your own Text component for text, do not specify color on Text. Toast will automatically pick the correct text color for the given variant.

The current Toast example is NOT displaying experimental changes. Learn more and/or activate the experimental changes.

Error

The current Toast example is NOT displaying experimental changes. Learn more and/or activate the experimental changes.

Thumbnail

The current Toast example is NOT displaying experimental changes. Learn more and/or activate the experimental changes.

Primary action

The current Toast example is NOT displaying experimental changes. Learn more and/or activate the experimental changes.

Component quality checklist

Component quality checklist
Quality item
Status
Status description
Figma Library
Ready
Component is available in Figma across all platforms.
Responsive Web
Ready
Component is available in code for web and mobile web.
iOS
Component is not currently available in code for iOS.
Android
Component is not currently available in code for Android.