Cognition

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 Cognition tokens. Press the button to fire a real toast, 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")

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 is shown as it appears. Success, error, warning, and info take the matching Cognition feedback tokens. Fire a live one from the preview above.

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.
toast.warning(message)
(message, options?) => id
—
Warning toast with warning styling.
toast.info(message)
(message, options?) => id
—
Informational toast with accent styling.
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 is powered by Sonner. The <Toaster> component must be mounted once at the app root; individual toasts are fired imperatively through the toast() function.

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.

Do
// 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/ui/sonner";

export default function RootLayout({ children }) {
  return (
    <body>
      {children}
      <Toaster />
    </body>
  );
}

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

toast.success("Changes saved");