Introduction

qwik-sonner 1.0.3: the toast component for Qwik 1 apps (@builder.io/qwik), ported from sonner by Emil Kowalski.

Installation

Install the 1.x line — the version range keeps you on Qwik 1 releases even after v2 becomes npm's latest:

npm install qwik-sonner@1

Built and tested against Qwik 1.5 (@builder.io/qwik). It ships ESM and CommonJS builds.

Quick start

Add <Toaster /> to your app — it's where the toasts render — then call toast() from anywhere.

import { component$ } from "@builder.io/qwik";
import { Toaster, toast } from "qwik-sonner";

export default component$(() => {
  return (
    <div>
      <Toaster />
      <button onClick$={() => toast("My first toast")}>Give me a toast</button>
    </div>
  );
});

Toast types

toast("Event has been created");

toast("Event has been created", {
  description: "Monday, January 3rd at 6:00pm",
});

toast.success("Event has been created");
toast.info("Event has new information");
toast.warning("Event has warning");
toast.error("Event has not been created");
toast.loading("Loading…");

Actions, promises, custom JSX and every option are in the API reference.

Styled or headless

// Styled (default)
import { Toaster, toast } from "qwik-sonner";

// Headless — no styles
import { Toaster, toast } from "qwik-sonner/headless";

Styling options are covered in Styling.

Upgrading to Qwik 2

qwik-sonner 2 supports Qwik 2 and adds swipe directions, top-layer rendering, multiple toasters and more. Read the migration guide.