Toast
A toast communicates the status of an action someone is trying to take or that something happened elsewhere in the app. Toasts are temporary surfaces. Use them for information that's useful and relevant, but not critical.
For critical messages, try a modal Dialog, Field error, or Message bar instead.
Resources
Types
Toasts generally fall into three categories: confirmation, progress, and communication. The toast component has slots that can be turned on and off to best help people achieve their goals. The ideal configuration and usage of each toast type is pictured below.
Confirmation toast
Confirmation toasts are shown to someone as a direct result of their action. A confirmation toast’s state can be success, error, warning, informational, or progress.
Progress toast
Progress toasts inform someone about the status of an operation they initiated.
Communication toast
Communication toasts inform someone of messages from the system or another person’s actions. These messages can include mentions, event reminders, replies, and system updates.
They include a call to action directly linking to a solution or the content that they reference. They can be either temporary or persistent. They’re dismissible only if there is another surface, like a notification center, where the customer can find this content again later.
Behavior
Dismissal
Toasts can have timed, conditional, or express dismissals, dependent on their use case.
Timed dismissal
If there is no action to take, toast will time out after seven seconds. Timed dismissal is best when there is no further action to take, like for a successful confirmation toast.
People who navigate via mouse can pause the timer by hovering over the toast. However, toasts that don’t include actions won’t receive keyboard focus for people who navigate primarily by keyboard.
Conditional dismissal
Use conditional dismissal for toasts that should persist until a condition is met, like a progress toast that dismisses once a task is complete.
Don’t use toasts for necessary actions. If you need the encourage people to take an action before moving forward, try a more forceful surface like a message bar or a dialog.
Express dismissal
Include the Close button to allow people to expressly dismiss toasts only if they can find that information again elsewhere, like in a notification center.
Determinate and indeterminate progress
Progress toasts can be either determinate or indeterminate, depending on the needs of your app and the capabilities of the technology you’re building on.
When the completion time can be predicted, show a determinate progress bar and percentage of completion. Determinate progress bars offer a reliable user experience since they communicate status and assure people things are still working.
If the completion time is unknown or its accuracy is unreliable, show an indeterminate spinner icon instead. Don’t show both a spinner and a progress bar in the same toast.
Don’t use both a spinner and a progress bar in a toast
Layout
Keep location predictable
Toasts should always appear in a consistent location within your app, where they are least likely to block the main content. This is usually the top-right or bottom-right.
Choose a location that works best for your product. For example, if you can toggle a notifications drawer from the top-right, place toasts there as well so that people will become used to looking for information in that part of the layout.
Place toasts in a consistent location
Don’t block the main content
Don’t overload the toaster
Toasts are wrapped in a container that handles their positioning, called a toaster.
New toasts always appear at the edge of a layout, pushing older toasts in the toaster toward the center. For example, if the toaster is at the top of the screen, a new toast will appear at the top and push any older toasts down.
Don’t show more than four toasts in a toaster and keep 16 pixels of space between them.
Stack up to 4 toasts
Accessibility
Use the intent prop to properly determine the semantic styles, icons and aria-live regions and roles used in the toast.
All feedback states except info have an “assertive” aria-live and interrupt any other announcement a screen reader is making. Too many interruptions can disrupt someone’s flow, so don’t overload people with too many assertive toasts.
Content
Communicate the main message in the title
Keep toast titles brief and focus on the most important info; people might not read the rest. Most confirmation and communication toast titles use passive voice, which starts with a noun, and ends with a past tense verb. For example, “File saved” or “App was updated.”
Confirmation toast title
Communication toast title
In progress toasts, start the title with an -ing verb that describes the process that’s happening and end with a noun. For example, “Uploading file” or “Migrating your data.” If there are multiple similar processes happening at once, combine them into one toast and summarize them in the title. For example, “Uploading 6 files to OneDrive.”
Only capitalize the first word of the title, and skip the period at the end. For more info, see Capitalization and Periods in the Microsoft Writing Style Guide.
Progress toast title
Give additional context in the body
Include additional information, like troubleshooting actions or next steps, in the optional body. Toasts are small surfaces and disappear quickly, so body content needs to be easy to skim at a glance. Try to limit body content to no more than 60 characters.
Note that if body content is pulled from an external source, like emails or mentions, it truncates after one line.
Use status text to describe progress
Give people the most accurate description of progress possible.
- For time-based estimates, use “X minutes remaining.” For example, “10 minutes remaining”
- For percentage-based estimates, use “X% complete.” For example, “65% complete”
- For estimates based on file size, use “X of X [unit of measure]”. For example, “10 of 17 GB”
Skip the period at the end of the status text. For more info, see Periods in the Microsoft Writing Style Guide.
Buttons should respond to title text
Write button labels that are specific responses to the main message in the title. For example, the title “An app was shared with you” has the button text “Open app.”
Be concise—limit link text to one or two words and no more than 36 characters. Usually a single verb is best. Include a noun if there’s any ambiguity about what the verb is acting on. For example, “Open app” instead of “Open.”
