Toast

A short message about something that just happened, in the bottom-right corner.

import { Button, Toast, toastManager } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function ToastBasic() {
  return (
    <Preview overlay={true}>
      <Toast.Provider>
        <Button.Root
          onClick={() => {
            toastManager.add({ title: "Title", description: "Description" });
          }}
        >
          Show toast
        </Button.Root>
      </Toast.Provider>
    </Preview>
  );
}

• Confirm an action that finished, or report one that failed. Use a Callout for a message that stays next to what it explains.
• The title says what happened; the description, if any, says what to do next.
• A plain toast is the success and shows a green check. Set type for the others: danger shows a red icon, warning an amber one, loading a spinner.
• Up to three toasts show at once; a fourth hides the oldest one.

Setup

<Toast.Provider>{app}</Toast.Provider>;

toastManager.add({ title: "Title" });
toastManager.add({ title: "Title", description: "Description", type: "danger" });

Put one Toast.Provider at the root of the app and call toastManager from anywhere, including outside React. It also has update, close and promise, for example to turn a loading toast into a success. Toasts close on their own after timeout, with the close button, or with a swipe right or down. actionProps adds a ghost button next to the text.

API

Toast.Provider takes the Base UI provider props except toastManager; it always uses the exported toastManager. Parts: Provider. Built on Base UI Toast.