Sonner

import { Slot, component$ } from "@builder.io/qwik";
import { Sonner } from "~/components/ui/base/sonner";

export default component$(() => (
  <Sonner.Toaster>
    <div class="p-4">
      Application content… <Slot />
    </div>
  </Sonner.Toaster>
));

import { component$ } from "@builder.io/qwik";
import { Button } from "~/components/ui/base/button";
import { useSonner } from "~/components/ui/base/sonner";

export const ToastDemo = component$(() => {
  const { toast } = useSonner();
  return (
    <>
      <Button onClick$={() => toast("Saved")}>Toast</Button>
      <Button
        onClick$={() =>
          toast({
            title: "Error",
            description: "Try again.",
            type: "error",
            duration: 0,
          })
        }
      >
        Persistent toast
      </Button>
    </>
  );
});