Sonner

import { Toaster, Button } from "@rhinolabs/ui"
import { toast } from "sonner"
 
export default function ToasterDemo() {
  return (
    <div>
      <Button onClick={() => toast("Event has been created")}>
        Show Toast
      </Button>
      <Toaster />
    </div>
  )
}

<div className="flex gap-2">
  <Button onClick={() => toast("Event has been created")}>
    Default Toast
  </Button>
  <Button onClick={() => toast.success("Profile updated successfully")}>
    Success Toast
  </Button>
  <Button onClick={() => toast.error("Failed to save changes")}>
    Error Toast
  </Button>
</div>

<Button
  onClick={() =>
    toast("Profile updated", {
      description: "Your changes have been saved successfully.",
    })
  }
>
  Show Toast with Description
</Button>

<Button
  onClick={() =>
    toast("Changes saved", {
      description: "Your document has been saved.",
      action: {
        label: "Undo",
        onClick: () => console.log("Undo"),
      },
      cancel: {
        label: "Cancel",
        onClick: () => console.log("Cancel"),
      },
    })
  }
>
  Show Toast with Actions
</Button>