API reference

toast(message, options?)            // message: string | JSXOutput
toast.message(message, options?)
toast.success(message, options?)
toast.info(message, options?)
toast.warning(message, options?)
toast.error(message, options?)
toast.loading(message, options?)
toast.promise(promise, data)
toast.custom((id) => jsx, options?)
toast.dismiss(id?)

import { $ } from "@builder.io/qwik";

toast("Event has been created", {
  action: {
    label: "Undo",
    onClick$: $(() => console.log("Undo")),
  },
});

import { $ } from "@builder.io/qwik";

toast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {
  loading: "Loading…",
  success: $((data) => `${data.name} has been added!`),
  error: "Error",
});

// Custom JSX with the default styling
toast(<div>My custom toast</div>);

// Fully custom, unstyled
toast.custom((id) => (
  <div>
    <h1>Custom toast</h1>
    <button onClick$={() => toast.dismiss(id)}>Dismiss</button>
  </div>
));

const toastId = toast("Sonner");

toast.success("Toast has been updated", { id: toastId });

toast.dismiss(toastId); // one toast
toast.dismiss();        // all toasts

toast("Event has been created", {
  onDismiss$: $((t) => console.log(`Toast ${t.id} has been dismissed`)),
  onAutoClose$: $((t) => console.log(`Toast ${t.id} has been closed automatically`)),
});