import { Button } from "@/components/ui/button";
import { useToastManager } from "@/components/ui/toast";
export function ToastDemo() {
const toast = useToastManager();
return (
<Button
onClick={() => {
toast.add({
title: "Profile Updated",
description: "Your information has been saved.",
});
}}
>
Show Toast
</Button>
);
}Installation
npx shadcn@latest add @eo-n/toastUsage
Add the ToastProvider to your app layout.
import { ToastProvider } from "@/components/ui/toast";
<html lang="en">
<body>
<ToastProvider>
{children}
</ToastProvider>
</body>
</html>import { useToastManager } from "@/components/ui/toast";const toast = useToastManager()
<Button
onClick={() => {
toast.add({
title: "This is a toast",
});
}}
>
Show Toast
</Button>Examples
With Action
import { Button } from "@/components/ui/button";
import { useToastManager } from "@/components/ui/toast";
export function ToastWithAction() {
const toast = useToastManager();
return (
<Button
variant="destructive"
onClick={() => {
const id = toast.add({
title: "Item deleted",
description: "The file has been moved to trash.",
actionProps: {
children: "Undo",
onClick: () => {
toast.close(id);
toast.add({ title: "Item restored" });
},
},
});
}}
>
Delete Item
</Button>
);
}Promise
import { Button } from "@/components/ui/button";
import { useToastManager } from "@/components/ui/toast";
export function ToastPromise() {
const toast = useToastManager();
const handleClick = () => {
toast.promise(
new Promise((resolve) => {
setTimeout(() => resolve("Done"), 3000);
}),
{
loading: {
title: "Loading...",
},
success: {
title: "Success!",
},
error: {
title: "Error",
},
}
);
};
return <Button onClick={handleClick}>Show Toast</Button>;
}API Reference
Provider
Provides settings for how toasts appear and behave.
| Prop | Type | Default |
|---|---|---|
position | "top-center" | "top-right" | "top-left" | "bottom-center" | "bottom-right" | "bottom-left" | bottom-right |
richColors? | boolean | false |
closeButton? | boolean | false |
timeout? | number | 5000 |
limit? | number | 3 |
toastManager? | ToastManager | - |