Sonner

1import { Toaster } from "passport-ui";
2import { toast } from "sonner";
3import { Button } from "passport-ui";

1{/* Add Toaster to your app root */}
2<Toaster position="bottom-right" />
3 
4{/* Trigger toasts */}
5<div className="flex gap-2 flex-wrap">
6  <Button onClick={() => toast("Default notification")}>
7    Default
8  </Button>
9  <Button
10    variant="outline"
11    onClick={() =>
12      toast("Meeting reminder", {
13        description: "You have a meeting in 10 minutes.",
14        action: {
15          label: "View",
16          onClick: () => console.log("View clicked"),
17        },
18      })
19    }
20  >
21    With Action
22  </Button>
23  <Button onClick={() => toast.success("Success message")}>
24    Success
25  </Button>
26  <Button onClick={() => toast.error("Error message")}>
27    Error
28  </Button>
29  <Button onClick={() => toast.warning("Warning message")}>
30    Warning
31  </Button>
32  <Button onClick={() => toast.info("Info message")}>
33    Info
34  </Button>
35</div>