[component]

Dev Mode
Toast
Description
Toasts are brief and small messages that overlay content, but do not block the user’s flow, as they are out of the way and ephemeral. Toasts do not require user action and primarily acknowledge that a user has performed an action or completed a task. Also known as ‘snackbar’.
There was an error
Usage Guidelines
Do
Use a toaster when you want to briefly acknowledge a users action without interrupting their flow.
Acknowledge an action that relates to another surface, providing a link that navigates the user to that surface.
Provide a way to undo actions.
Provide quick information on system processes.
Don't
Do not use a toaster if there is a crucial error that’s blocking the flow; consider using error messages, modals, or banners instead.
For confirmation on an action; consider a modal instead.
For upsells, FYIs, or promotional content; consider a banner instead.
To guide or educate the user.
Accessibility
Toasts should be on the screen for a minimum of 5 seconds.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Additional Documentation
NN/g article
Related
Banners
Examples
Toasts
There was an error
Default toast with a pretty long toast message. This is getting pretty long at this point.
Great success!
Toast title
Toast text content that's kind of long. La la la la la la la la la la.
Todos sync needs attention: 1 conflict
Tap Resolve to review and fix conflicts.