Toast
A short note that floats in after an action, like Saved successfully, and goes away on its own after a few seconds, with an optional Undo. In loading mode it is a small notice that stays while work runs, with a progress bar and a Cancel.
Master
Click the button to show it. The top bar counts down 8 seconds with an action like Undo, 5 without; point at the toast or tab into it to pause it, and Escape closes it. Switch the intent. Switch loading to see loading mode: it sits top center with a Spinner, the title wave and a thin bar (% shows a value), and only Cancel closes it.
Usage
Use Toast to confirm an action people just took, or to offer a quick Undo. It is one component: render it with open and onClose, and set open when the action happens. It floats at the bottom right of the screen, above dialogs; several stack. It is 360 wide and has no close button. A bar along the top counts down duration and then onClose runs: 5 seconds by default, 8 with an action, so people have time to reach it. Pointing at the toast or tabbing into it pauses the countdown, and Escape closes it while focus is inside. intent colors the icon and the bar. actionLabel adds one link-style action, like Undo; picking it runs onAction and closes the toast. Loading mode: set progress to a number from 0 to 100, or to indeterminate when the amount done is not known, for work that runs in the background while people keep using the page, like Data is loading. A loading toast sits at the top center of the screen, and loading toasts stack there. The kit Spinner takes the place of the icon, the title runs through the kit TextLoader wave, and a thin kit Meter bar sits under the text, with the percent after it. It has no countdown and never closes itself, and Escape does not close it: actionLabel, like Cancel, is the way out (onAction runs, then onClose), and the screen sets open to false when the work is done. It has no scrim and does not block the page. intent colors the bar. For messages that must stay on the page, use Callout. See contracts/toast.json for the full contract. A toast is not opened by anything in particular, so it follows the page's own theme rather than a frame's.
Do's
- Confirming an action people just took: saved, sent, deleted.
- Offering a quick Undo right after a change.
- Loading mode: work that runs in the background while people keep using the page, like loading data or an import, with a way to cancel it.
Don'ts
- Do not use it for errors people must fix or read later. Use Callout on the page.
- Do not put more than one action in a toast.
- Do not make duration shorter than people need to read it and reach the action.
- Do not invent ToastTitle, ToastDescription, ToastAction or a toast container. Render Toast.
- Do not put a scrim behind a loading toast or make it modal. If people cannot do anything until the work is done, the page shows the loading itself.
- Do not set duration on a loading toast or close it on a timer; close it when the work is done or cancelled.
- Do not add a close button to a toast. The countdown, the action or Escape closes it; give a loading toast an action like Cancel when the work can be stopped.
- Do not move toasts: confirmations sit bottom right, loading toasts top center.
- Do not use a loading toast for a short wait in one spot. Put a Spinner there.
- Do not use raw hex.
<Toast
open={saved}
onClose={close}
title="Saved successfully"
description="Your changes have been saved."
intent="info"
actionLabel="Undo"
onAction={undo}
/>