Shared Component

Toast Notifications

A global toast system for user feedback. Use useToast() from any client component to trigger success, error, warning, or info toasts.

Quick triggers

Click any button to fire a toast with default message.

Custom toast builder

Message

Type

Duration: 4.0s

1s10s

Queue stress test

Fires 6 toasts rapidly. Only 5 can be visible at once — the oldest gets evicted.

Usage in code

import { useToast } from "@/shared/components/toast-provider";

function MyComponent() {
  const toast = useToast();

  function handleSave() {
    try {
      // ... save logic
      toast.success("Changes saved!");
    } catch {
      toast.error("Failed to save changes.");
    }
  }

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