Components

Toast

A transient notification that appears briefly and dismisses on its own. Use it for confirmations, errors, and status feedback that does not block the task at hand.

Preview

Rendered with live Folio tokens. Fire a toast bottom-right here, or hit Try it on any type in Variants below. No dark: classes.

Variants

Event scheduled

toast("Event scheduled")

Changes saved

toast.success("Changes saved")

Could not save changes

toast.error("Could not save")

Your trial ends in 3 days

toast.warning("Trial ends soon")

A new version is available

toast.info("Update available")

Saving changes…

toast.loading("Saving changes…")

Saving changes…

toast.promise(save, {
  loading, success, error,
})

Workspace archived

Undo

toast("Archived", {
  action: { label: "Undo", onClick },
})

Changes saved

Your workspace is up to date as of a moment ago.

toast("Saved", {
  description: "Up to date.",
})

Each type as it appears — hit Try it on any tile to fire it live. Success, error, warning, and info take the matching Folio feedback tokens; loading is neutral (spinner, no feedback color) since it is an in-progress state, not an outcome.

States

Changes saved

Your workspace is up to date.

Entering. Slides up and fades in.

Changes saved

Your workspace is up to date.

Visible. Resting on screen.

Changes saved

Your workspace is up to date.

Dismissing. Fades and shrinks out.

Toasts are transient, so these three phases are shown statically. Fire the live toast in the preview to see the real motion.

API

Call

Signature

Default

Description

toast(message)

(message, options?) => id

—

Default neutral toast. Returns the toast id.

toast.success(message)

(message, options?) => id

—

Confirmation toast with success styling.

toast.error(message)

(message, options?) => id

—

Error toast with danger styling. It stays until dismissed and shows a close button. Pass duration to override.

toast.warning(message)

(message, options?) => id

—

Warning toast with warning styling.

toast.info(message)

(message, options?) => id

—

Informational toast with info styling.

toast.loading(message)

(message, options?) => id

—

Neutral, indeterminate in-progress toast with a spinner. Update or dismiss it by id when the work settles.

toast.promise(promise)

(promise, { loading, success, error }) => id

—

Fires a loading toast, then swaps to the success or error toast when the promise resolves or rejects.

options.description

ReactNode

undefined

A secondary line shown under the message.

options.action

{ label, onClick }

undefined

A single action button rendered in the toast.

options.duration

number

4000

Milliseconds the toast stays before auto-dismiss. toast.error defaults to Infinity.

Toast is powered by Sonner. The <Toaster> component must be mounted once at the app root; individual toasts are fired imperatively through the toast() function. Import both from @/components/shadcn/sonner, not from sonner, so toast.error gets its sticky default. Toaster takes every Sonner prop, plus variant: "default" (the Folio surfaces above) or "semantic" (Sonner rich colors mapped to the same Folio tokens).

Don't and Do

Don't

Don't use a toast for an error that needs the reader to act. A toast dismisses itself, so anything that requires a decision or a fix will vanish before it is handled. Put those in inline validation next to the field, or in a Dialog that holds focus.

// Confirm a completed, non-blocking action
toast.success("Changes saved");

toast("Workspace archived", {
  action: { label: "Undo", onClick: restore },
});

Use it for confirmations, background task completions, and non-blocking status updates.

// 1. Mount the Toaster once at the app root
import { Toaster } from "@/components/shadcn/sonner";
import { Spinner } from "@/components/shadcn/spinner";

export default function RootLayout({ children }) {
  return (
    <body>
      {children}
      <Toaster
        position="bottom-right"
        icons={{ loading: <Spinner className="size-4" /> }}
      />
    </body>
  );
}

// 2. Fire toasts imperatively from anywhere
import { toast } from "@/components/shadcn/sonner";

toast.success("Changes saved");