Toast

Transient notifications for saves, errors, and confirmations. Stack in a viewport and dismiss with close or timeout.

Examples

Basic

With action

Overview

Wrap the app (or a demo) in ToastProvider, render a portal viewport that maps toasts from useToastManager, then call toastManager.add() from buttons or async flows.

tsx

import {
  ToastProvider,
  ToastPortal,
  ToastViewport,
  ToastRoot,
  ToastContent,
  ToastTitle,
  ToastDescription,
  ToastClose,
  useToastManager,
} from "@standard-ui/react"

<ToastProvider>
  <ToastPortal>
    <ToastViewport>
      {toasts.map((toast) => (
        <ToastRoot key={toast.id} toast={toast}>
          <ToastContent>
            <ToastTitle />
            <ToastDescription />
            <ToastClose aria-label="Close" />
          </ToastContent>
        </ToastRoot>
      ))}
    </ToastViewport>
  </ToastPortal>
</ToastProvider>

Usage

Add a toast

Call useToastManager inside the provider, then pass title, description, and optional action props.

tsx

const toastManager = useToastManager()

toastManager.add({
  title: "Saved",
  description: "Draft stored locally.",
})

Anatomy

Provider owns the queue; viewport renders each root with content parts.

tsx

ToastProvider
  ToastPortal
    ToastViewport
      ToastRoot
        ToastContent
          ToastTitle
          ToastDescription
          ToastAction
          ToastClose

API

Parts mirror Base UI Toast. Common pieces:

Part	Role
ToastProvider	Context and queue for the toast manager.
ToastViewport	Fixed stack region for visible toasts.
ToastRoot	Single toast shell; pass the toast object.
useToastManager	Hook for add, close, update, and toasts list.
createToastManager	Global manager for use outside React trees.

Guidelines

Do

Keep copy short — title plus one supporting line
Offer Undo when the action is destructive and reversible
Mount one provider high in the tree for shared toasts

Don't

Don't use toasts for critical errors that need a dialog
Don't spam the queue — coalesce or replace when possible
Don't omit a close control for long-lived messages