Toast

1
"use client";
2
3
import { ToastProvider, useToast } from "@/shared/ui/toast";
4
5
// 1. Wrap your app (or layout) with ToastProvider
6
export default function Layout({ children }: { children: React.ReactNode }) {
7
  return (
8
    <ToastProvider position="top-right">
9
      {children}
10
    </ToastProvider>
11
  );
12
}
13
14
// 2. Use the useToast hook in any client component
15
function SaveButton() {
16
  const { toast, dismiss } = useToast();
17
18
  const handleSave = async () => {
19
    try {
20
      await saveData();
21
      toast({
22
        title: "Changes saved",
23
        description: "Your profile has been updated.",
24
        variant: "success",
25
      });
26
    } catch {
27
      toast({
28
        title: "Save failed",
29
        description: "Please try again.",
30
        variant: "error",
31
        duration: 8000, // custom duration (default 5000ms)
32
      });
33
    }
34
  };
35
36
  return <button onClick={handleSave}>Save</button>;
37
}
38
39
// Variants: "success" | "error" | "warning" | "info"
40
toast({ title: "Saved", variant: "success" });
41
toast({ title: "Error", description: "Something went wrong.", variant: "error" });
42
toast({ title: "Warning", variant: "warning" });
43
toast({ title: "Info", variant: "info" });
44
45
// Positions: "top-right" | "bottom-right" | "top-left" | "bottom-left"
46
<ToastProvider position="bottom-right">{children}</ToastProvider>
47
48
// Dismiss programmatically
49
const id = toast({ title: "Loading..." });
50
dismiss(id);