Toast
Display transient, customizable popup messages that appear on screen to inform users of status changes, errors, or successful actions.
Display transient, customizable popup messages that appear on screen to inform users of status changes, errors, or successful actions.
import { toast } from "@/components/ui/toast";toast.add({
title: "Event has been created",
description: "Monday, January 3rd at 6:00pm",
});By default, toasts appear in the bottom-right corner. You can change this by setting the position prop on the ToastProvider.
Allowed values: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right. For example:
<ToastProvider position="top-center">{children}</ToastProvider>You can change the radius of the toast by passing the radius property in data prop to the toast.add method.
Allowed values: none, sm, md, lg, full.