React hook for imperatively creating, updating, and dismissing toast notifications from anywhere in your app.
"use client";
import { Button } from "@/components/ui/button";
import { useToast } from "@/components/ui/use-toast";
import {
Toast,
ToastClose,
ToastDescription,
ToastProvider,
ToastTitle,
ToastViewport,
} from "@/components/ui/toast";
function Toaster() {
const { toasts } = useToast();
return (
<ToastProvider>
{toasts.map(({ id, title, description, action, ...props }) => (
<Toast key={id} {...props}>
<div className="grid gap-1">
{title && <ToastTitle>{title}</ToastTitle>}
{description && <ToastDescription>{description}</ToastDescription>}
</div>
{action}
<ToastClose />
</Toast>
))}
<ToastViewport />
</ToastProvider>
);
}
export default function Demo() {
const { toast } = useToast();
return (
<div className="flex h-full min-h-[300px] w-full items-center justify-center p-8">
<Button
variant="outline"
onClick={() =>
toast({
title: "Scheduled: Catch up",
description: "Friday, February 10, 2023 at 5:57 PM",
})
}
>
Show Toast
</Button>
<Toaster />
</div>
);
}
Part of cult ui — browse the full library on 21st.dev.