Qwik Sonner

An opinionated toast component for Qwik.

Installation

npm install qwik-sonner@beta

For Qwik 2. On Qwik 1? Use qwik-sonner@1 — v1 docs.

Usage

Render the toaster in the root layout of your app.

import { component$, Slot } from "@qwik.dev/core";
import { Toaster, toast } from "qwik-sonner";

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

Types

You can customize the type of toast you want to render, and pass an options object as the second argument.

toast('Event has been created')

Position

Swipe direction changes depending on the position.

<Toaster position="bottom-right" />

Expand

You can change the amount of toasts visible through the visibleToasts prop.

<Toaster expand={false} />

Other

toast.success('Event has been created') 
// ...
<Toaster richColors />