Toast

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

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#

portalContainer
Base UI Toast.Portal.Props['container']
Portal container for the default viewport when ToastProvider renders it.
renderViewportdefault: true
boolean
Pass false when composing a custom viewport.
viewportPlacementdefault: "bottom-center"
ToastViewport placement
Placement passed to the default ToastViewport.
viewportStrategydefault: "fixed"
ToastViewport strategy
Positioning strategy passed to the default ToastViewport.
...props
Base UI Toast.Provider.Props
Provides toast state and renders the default viewport/list.

toast#

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.progressdefault: false
boolean
Shows 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#

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

createToastManager#

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

ToastPortal#

...props
Base UI Toast.Portal.Props
Portals the viewport. Pass container when a docs preview needs local containment.

ToastViewport#

placementdefault: "bottom-center"
ToastViewport placement
Use none for ToastPositioner anchored toasts.
strategydefault: "fixed"
"fixed" | "absolute"
Use absolute inside contained previews.
...props
Base UI Toast.Viewport.Props
Viewport landmark for toasts.

ToastPositioner#

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

ToastArrow#

...props
Base UI Toast.Arrow.Props
Optional arrow rendered inside an anchored toast positioned by ToastPositioner.

ToastProgress#

durationdefault: 5000
number
Progress animation duration in milliseconds.
...props
React.HTMLAttributes<HTMLDivElement>
Bottom-edge timeout progress slot. Render inside ToastContent.

ToastRoot#

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

ToastIcon#

...props
React.HTMLAttributes<HTMLDivElement>
Leading icon slot. Compose a caller-owned status or product icon.

ToastBody#

...props
React.HTMLAttributes<HTMLDivElement>
Vertical stack for ToastTitle and ToastDescription.

ToastContent#

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

ToastActions#

...props
React.HTMLAttributes<HTMLDivElement>
Action row container. Place ToastClose before ToastAction so dismiss appears before the primary action.

ToastTitle#

...props
Base UI Toast.Title.Props
Renders toast.title by default, or explicit children.

ToastDescription#

...props
Base UI Toast.Description.Props
Renders toast.description by default, or explicit children.

ToastAction#

loadingdefault: false
boolean
Shows a loading affordance on the action when the toast is busy.
loadingLabeldefault: "Loading"
string
Accessible label for the loading spinner.
...props
Base 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#

...props
Base UI Toast.Close.Props
Dismiss button. Renders a default text label unless children are provided.