Skip to content
qwik-sonner

You're reading the docs for qwik-sonner 1.0.3, the Qwik 1 (@builder.io/qwik) line. It no longer receives new features.Docs for 1.0.3 (Qwik 1)

Go to the Qwik 2 docs (v2)Qwik 2 docs
Guides

Styling

Customizing toasts in qwik-sonner 1.x.

All toasts

<Toaster
  toastOptions={{
    style: { background: "red" },
    class: "my-toast",
    descriptionClass: "my-toast-description",
  }}
/>

A single toast

toast("Event has been created", {
  style: { background: "red" },
  class: "my-toast",
  descriptionClass: "my-toast-description",
});

Per-part classes

classes accepts toast, title, description, loader, closeButton, cancelButton, actionButton, content, icon and one key per type (success, error, info, warning, loading, default). Combine it with unstyled to start from a blank slate.

<Toaster
  toastOptions={{
    unstyled: true,
    classes: {
      toast: "bg-blue-400",
      title: "text-red-400",
      description: "text-red-400",
      actionButton: "bg-zinc-400",
      cancelButton: "bg-orange-400",
      closeButton: "bg-lime-400",
    },
  }}
/>

Toaster options

<Toaster theme="dark" />
<Toaster position="top-center" />
<Toaster expand visibleToasts={9} />
<Toaster richColors closeButton />
<Toaster offset="80px" />
<Toaster duration={10000} />
<Toaster hotkey={["KeyC"]} />

Headless

Import from qwik-sonner/headless for the same components without the stylesheet, and use toast.custom to render your own markup.