Toast

Toast notification system with ToastProvider, useToast hook, and success/error/warning/info methods.

Overview

The toast system from packages/ui provides non-intrusive notifications for user feedback. It includes a ToastProvider for rendering toasts and a useToast hook for triggering them from any component.

Setup

Add ToastProvider to your root layout so toasts can render anywhere in the app:

// app/layout.tsx
import { ToastProvider } from "@saas/ui";

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

The provider renders a container for toast elements, typically positioned at the bottom-right of the viewport.

useToast Hook

Import and call useToast in any client component:

"use client";

import { useToast } from "@saas/ui";

export default function SaveButton() {
  const { toast } = useToast();

  const handleSave = async () => {
    try {
      await saveData();
      toast({ title: "Saved", description: "Your changes have been saved." });
    } catch {
      toast({ title: "Error", description: "Failed to save.", variant: "destructive" });
    }
  };

  return <button onClick={handleSave}>Save</button>;
}

Toast Methods

Success (default)

toast({
  title: "Success",
  description: "Operation completed.",
});

Error / Destructive

toast({
  title: "Error",
  description: "Something went wrong.",
  variant: "destructive",
});

With action

toast({
  title: "Item deleted",
  description: "The item has been removed.",
  action: <button onClick={undo}>Undo</button>,
});

Toast Options

Property	Type	Description
`title`	`string`	Bold heading text
`description`	`string`	Body text below the title
`variant`	`"default" \| "destructive"`	Visual style
`action`	`ReactNode`	Optional action button
`duration`	`number`	Auto-dismiss time in ms (default: 5000)

Multiple Toasts

Multiple toasts stack automatically. New toasts appear at the bottom of the stack. Each toast auto-dismisses after its duration unless the user hovers over it.

Styling

Toast styles are defined in the UI package. Key classes:

Class	Purpose
`fixed bottom-4 right-4`	Positioned at bottom-right
`rounded-lg border shadow-lg`	Card-like appearance
`bg-white text-gray-900`	Default variant colors
`bg-red-600 text-white`	Destructive variant colors
`animate-in slide-in-from-bottom`	Entry animation

Tips

Use the default variant for success and informational messages.
Reserve the destructive variant for errors and failures.
Keep toast messages short (under 10 words for the title, under 20 for the description).
Do not use toasts for critical information that requires user acknowledgment; use a dialog instead.

Done reading? Mark this page as complete.

Toast

On this page