Toast Notification Styles with Sonner

Here's a component that demonstrates various toast styles using the Sonner library:

How to Use These Toast Styles

The example above demonstrates various ways to use the Sonner toast library:

1. Basic Toast Types:

   • Default: toast("Message")
   • Success: toast.success("Success message")
   • Error: toast.error("Error message")
   • Warning: toast.warning("Warning message")
   • Info: toast.info("Info message")

2. Custom Styling:

   • Custom colors: toast("Message", { style: { backgroundColor: "#4b0082", color: "white" } })
   • Custom icons: toast("Message", { icon: "🚀" })
   • Custom duration: toast("Message", { duration: 5000 }) (5 seconds)

3. Interactive Toasts:

   • With action buttons: toast("Message", { action: { label: "Yes", onClick: () => {} } })
   • Loading states: const toastId = toast.loading("Loading..."); toast.success("Done!", { id: toastId })

4. Position Variants:

   • toast("Message", { position: "top-center" })
   • Other positions: "top-left", "top-right", "bottom-left", "bottom-center", "bottom-right"

Make sure to include the <Toaster /> component in your layout for the toasts to appear.