Toast

This toast primitive provides a small in-memory notification stack and a matching Toaster renderer. It is useful when an action should confirm its result without interrupting the current page, especially in apps that already use the repo's use-toast hook flow.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

import { Toaster } from "@/components/ui/toaster"
import { ToastAction } from "@/components/ui/toast"
import { toast } from "@/hooks/use-toast"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <Toaster />
    </>
  )
}

toast({
  title: "Publish queued",
  description: "The issue is scheduled for 09:00.",
  action: <ToastAction>Undo</ToastAction>,
})

Why This Primitive Exists

• Use it for brief confirmations, queued actions, and failures that should not replace the current page.
• Prefer it when the user can continue working after reading the notice.
• Avoid it for required decisions, long explanations, or validation the user must resolve before continuing.

Examples

Basic Confirmation

The default toast keeps one compact notice visible and leaves the next step optional.

toast({
  title: "Release brief exported",
  description: "A copy was sent to the review inbox.",
})

Destructive Feedback

Use the destructive variant when the result reflects a failure, a risky outcome, or a blocking condition that still does not justify a modal.

toast({
  variant: "destructive",
  title: "Publish failed",
  description: "The release is still missing legal approval.",
  action: <ToastAction>Open issue</ToastAction>,
})

In Context

The notice should support the workflow, not replace it. Keep the primary page state visible so the user can understand what the toast refers to.

<Button
  onClick={() =>
    toast({
      title: "Publish queued",
      description: "The issue is scheduled for 09:00 and remains editable until approval closes.",
    })
  }
>
  Queue publish
</Button>

Guidance

Keep The Message Short

• Lead with the result: queued, exported, failed, restored.
• Use the description for one clarifying line only.
• If the notice needs a paragraph or a decision tree, it should not be a toast.

Mount One Shared Toaster

• Render Toaster once near the app root.
• Trigger notices with toast(...) from @/hooks/use-toast.
• Do not scatter multiple mounted toaster instances through the page tree.

Match The Primitive To The Feedback Job

• Use this path when you want the repo's hook-driven queue and React-element action slot.
• Use dialogs or inline validation when the user must stop and resolve something.
• If your app is standardizing on the alternate Sonner wrapper, see Sonner instead of mixing both patterns casually.

API Reference

Core Surface Exports

Toast

Hook And Renderer

Built-In Behavior

The lower-level toast parts accept normal DOM props in addition to the props listed above.