Toast

A transient feedback layer for copy, forward, sync, and action-result messages.

GitHub

Preview#

Controls

Anatomy#

import {
  ToastAction,
  ToastActions,
  ToastBody,
  ToastClose,
  ToastContent,
  ToastDescription,
  ToastIcon,
  ToastPortal,
  ToastProvider,
  ToastProgress,
  ToastRoot,
  ToastTitle,
  ToastViewport,
} from "raft-ui";

<ToastProvider renderViewport={false}>
  <ToastPortal>
    <ToastViewport>
      <ToastRoot toast={toast}>
        <ToastContent>
          <ToastIcon />
          <ToastBody>
            <ToastTitle />
            <ToastDescription />
          </ToastBody>
          <ToastActions>
            <ToastClose />
            <ToastAction />
          </ToastActions>
          <ToastProgress duration={5000} />
        </ToastContent>
      </ToastRoot>
    </ToastViewport>
  </ToastPortal>
</ToastProvider>

Usage#

Icon, description, action, and dismiss are all optional. Omit the part you don't need instead of rendering it empty.

Full#

No icon#

No description#

No action#

No dismiss#

Progress#

Loading action#

Icon + title#

Minimal#

Keep long-running or historical notifications in NotificationCenter; use Toast for immediate feedback that can disappear.

Stacked#

Anchored with arrow#

Anchored toasts use ToastPositioner with the positionerProps supplied to toastManager.add. Keep anchored and stacked toasts in separate ToastProvider instances when both patterns appear in the same app.

API#WIP

ToastProvider#

PropTypeDefaultDescription
portalContainerBase UI Toast.Portal.Props['container']—Portal container for the default viewport when ToastProvider renders it.
renderViewportbooleantruePass false when composing a custom viewport.
viewportPlacementToastViewport placement"bottom-center"Placement passed to the default ToastViewport.
viewportStrategyToastViewport strategy"fixed"Positioning strategy passed to the default ToastViewport.
...propsBase UI Toast.Provider.Props—Provides toast state and renders the default viewport/list.

toast#

PropTypeDefaultDescription
info(title: string, options?) => string—Imperative info toast. Returns the toast id.
success(title: string, options?) => string—Imperative success toast. Returns the toast id.
warning(title: string, options?) => string—Imperative warning toast. Returns the toast id.
error(title: string, options?) => string—Imperative error toast. Returns the toast id.
add(options & { title, type? }) => string—Add a toast with an explicit type. Defaults to info.
options.progressbooleanfalseShows a bottom-edge timeout progress line for auto-dismiss toasts.
dismiss(id?: string) => void—Close one toast by id, or the active toast when omitted.

useToastManager#

PropTypeDefaultDescription
...() => { toasts, add, close, update, promise }—Advanced hook for custom toast lists, seeded docs previews, and anchored composition.

createToastManager#

PropTypeDefaultDescription
...Base UI createToastManager—Advanced escape hatch for isolated channels, local previews, and multiple independent toast roots.

ToastPortal#

PropTypeDefaultDescription
...propsBase UI Toast.Portal.Props—Portals the viewport. Pass container when a docs preview needs local containment.

ToastViewport#

PropTypeDefaultDescription
placementToastViewport placement"bottom-center"Use none for ToastPositioner anchored toasts.
strategy"fixed" | "absolute""fixed"Use absolute inside contained previews.
...propsBase UI Toast.Viewport.Props—Viewport landmark for toasts.

ToastPositioner#

PropTypeDefaultDescription
...propsBase UI Toast.Positioner.Props—Positions contextual toasts against the anchor supplied through toastManager.add({ positionerProps }).

ToastArrow#

PropTypeDefaultDescription
...propsBase UI Toast.Arrow.Props—Optional arrow rendered inside an anchored toast positioned by ToastPositioner.

ToastProgress#

PropTypeDefaultDescription
durationnumber5000Progress animation duration in milliseconds.
...propsReact.HTMLAttributes<HTMLDivElement>—Bottom-edge timeout progress slot. Render inside ToastContent.

ToastRoot#

PropTypeDefaultDescription
layout"stacked" | "inline""stacked"Individual toast frame layout. Keep stacked by default; use inline only inside ToastPositioner anchored toasts or isolated one-off previews.
...propsBase UI Toast.Root.Props—Individual toast frame.

ToastIcon#

PropTypeDefaultDescription
...propsReact.HTMLAttributes<HTMLDivElement>—Leading icon slot. Compose a caller-owned status or product icon.

ToastBody#

PropTypeDefaultDescription
...propsReact.HTMLAttributes<HTMLDivElement>—Vertical stack for ToastTitle and ToastDescription.

ToastContent#

PropTypeDefaultDescription
...propsBase UI Toast.Content.Props—Grid shell for icon, title/description, and a right-aligned action row.

ToastActions#

PropTypeDefaultDescription
...propsReact.HTMLAttributes<HTMLDivElement>—Action row container. Place ToastClose before ToastAction so dismiss appears before the primary action.

ToastTitle#

PropTypeDefaultDescription
...propsBase UI Toast.Title.Props—Renders toast.title by default, or explicit children.

ToastDescription#

PropTypeDefaultDescription
...propsBase UI Toast.Description.Props—Renders toast.description by default, or explicit children.

ToastAction#

PropTypeDefaultDescription
loadingbooleanfalseShows a loading affordance on the action when the toast is busy.
loadingLabelstring"Loading"Accessible label for the loading spinner.
...propsBase UI Toast.Action.Props—Renders the toast action. The default toast channel maps action.label to ToastAction; custom managers can still pass Base UI actionProps.

ToastClose#

PropTypeDefaultDescription
...propsBase UI Toast.Close.Props—Dismiss button. Renders a default text label unless children are provided.