A toast is short-lived feedback on something the user just did: saved, copied, failed. It slides in, says its piece and leaves without blocking the page.
Every example is the real component, and every “Show toast” button fires a real toast in the corner of your window. Figma: System Toast.
Choose status, emphasis and content and the toast and its code update. Press Show toast to see how it enters, stays and leaves in your window.
The slide-in and slide-out animation is set in Motion.
The markup has no motion. Slide-in and slide-out animation is set in Motion.
Six real situations. Each button fires the toast the way production code would. Dismiss a toast with the ×, by clicking anywhere outside it, or wait for auto-hide. Where a toast offers an action, the action fires a second toast.
Resize the window below 640px and trigger a toast again: it now slides in from the top and fills the width.
A toast is short-lived feedback on something the user just did: saved, copied, failed. It slides in at the edge of the window, says its piece and leaves without blocking the page.
It is a task-generated notification. System messages that concern the whole page belong in a Banner, and messages that must stay next to the content in an Inline notification. Not sure it is the right component? Start at the Notifications guide.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use a toast. Specifications holds the values: tokens, sizes, measurements, states and requirements. Code shows how to show a toast from script and the CSS behind it.
Use a toast for a brief message that needs little or no interaction. Use it to:
A toast belongs to the action the user just took. A banner is for the whole page or system and stays until it is closed.
Weak is white with the status color in the left edge only. It is right for normal feedback, also for a warning or an error. Strong has a tinted background and is used sparingly. A toast disappears, so never make it louder for something the user must notice: show that as a Banner or near the content. See Choosing the emphasis.
A toast is read in a few seconds. Say what happened in a few words, and put detail somewhere that stays.
A toast reports something that has happened. When the user must confirm or choose before going on, use a Modal.
| The message… | Use |
|---|---|
| confirms what the user just did, briefly | Toast (this page) |
| confirms an add to cart or wishlist | E-Com Toast |
| belongs to one section and must stay | Inline |
| concerns the whole page or system | Banner |
| needs a decision before the user can go on | Modal |
title-sm, bold.body-md. One or two short lines.Four statuses in two emphasis levels, each with a Default and an Actionable layout. The status decides the color and the icon; the emphasis decides how loud the toast is.
Weak is the default: white, with the status color in the 2px left edge only. Strong has a tinted background and is used sparingly.
Add buttons and an optional text link below the text, indented 32px to line up under it. Use it when the user needs a way forward, such as Retry after an error.
The action area holds either buttons or inline links, not both. Use links for lighter choices such as Undo or Learn more.
An Informational toast may carry an icon the author chooses instead of the default info: a Google Material Symbols name, shown as Outlined. Success, Warning and Error keep their own filled icon.
A toast has one size: 375px wide from 640px, and the full width of the window below. Measurements and the position are under Sizes in Specifications.
The icon, the text and the × sit on one row, top-aligned. In the Actionable layout the buttons or links start 32px from the left edge of the content, under the text.
A toast is fixed to the window and always enters from the right: 40px from the top and the right edge from 1024px, 32px below. Below 640px it fills the width and enters from the top. Only one toast is shown at a time; a new one replaces the old. The values are under Sizes in Specifications.
375px, never wider than the window. The text wraps; the toast grows in height.
A white or tinted surface, a 2px status edge and the highest shadow (elevation-b-80). Token names and values are under Design Tokens in Specifications.
A toast closes with the ×, with a click anywhere outside it, or by itself. Success and Informational auto-hide after 4 seconds. Warning and Error stay until they are dismissed, so the user does not miss them. An Actionable toast closes when one of its actions is chosen.
A second toast replaces the first one at once. Do not queue them.
The ×, the buttons and the links take focus with the visible focus ring, on keyboard use only. Links lose their underline on hover. All states are under States in Specifications.
The toast only slides: it enters with decelerate emphasized and leaves with accelerate, both 300ms. Try other values under Motion above, and see Motion in Specifications. With reduced motion it appears and leaves without sliding.
All requirements are listed under Accessibility Requirements in Specifications.
Tab moves to the ×, the buttons and the links, each with a visible focus ring. Enter or Space activates the focused control. A toast does not take focus when it appears.
The toast area is role="status" with aria-live="polite", so a new toast is announced without moving focus. The status is carried by the icon and the text, not by color alone.