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
Remember to localize
text and any string within
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 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
Component quality checklist
Component is available in Figma across all platforms.
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is not currently available in code for Android.