Toast options

The last argument of every toast helper — typed as ExternalToast. Toaster-wide defaults live in toastOptions.

Reference

Option	Type	Default
`id`	`string \| number`	—
Reuse an existing id to update that toast in place.
`description`	`string \| JSXOutput \| () => …`	—
Second line under the title.
`duration`	`number`	`4000`
Time in ms before the toast closes. `Number.POSITIVE_INFINITY` keeps it until dismissed.
`icon`	`JSXOutput`	—
Replaces the icon of this toast.
`action`	`Action \| JSXOutput`	—
Primary button (see below), or your own JSX.
`cancel`	`Action \| JSXOutput`	—
Secondary button. Does nothing on toasts with `dismissible: false`.
`closeButton`	`boolean`	—
Show (or hide) the close button, overriding the Toaster.
`dismissible`	`boolean`	`true`
`false` disables swiping and the cancel button. Use with `duration: Infinity` for toasts that must stay.
`onDismiss$`	`QRL<(toast: Toast) => unknown>`	—
Called when the user closes the toast with the close button or a swipe, or your code calls `toast.dismiss()`. Not called for the cancel/action buttons or the timer.
`onAutoClose$`	`QRL<(toast: Toast) => unknown>`	—
Called when the toast closes because its timer ran out.
`position`	`Position`	—
Show this toast in another corner than the Toaster's.
`toasterId`	`string`	—
Send the toast to the `<Toaster id>` with that id.
`richColors`	`boolean`	—
Override the Toaster's `richColors`.
`invert`	`boolean`	—
Override the Toaster's `invert`.
`unstyled`	`boolean`	—
Drop the default styles for this toast.
`class`	`string`	—
Class for the toast element.
`descriptionClass`	`string`	—
Class for the description.
`classes`	`ToastClassnames`	—
Per-part classes — see Styling.
`style`	`CSSProperties`	—
Inline style for the toast element.
`actionButtonStyle`	`CSSProperties`	—
Inline style for the action button.
`cancelButtonStyle`	`CSSProperties`	—
Inline style for the cancel button.
`testId`	`string`	—
Rendered as `data-testid` on the toast.
`important`Deprecated	`boolean`	—
No effect. In qwik-sonner 1.x it announced the toast with `aria-live="assertive"`; sonner 2 dropped it, and every toast is announced through the Toaster's polite live region.

Action

The shape of action and cancel when you don't pass JSX:

Field	Type	Default
`label`	`string \| JSXOutput`	—
Button content.
`onClick$`	`QRL<(event, button) => any>`	—
Runs on click. Wrap it in `$()`.
`preventDefault`	`boolean`	`false`
Keep the toast open after the click.
`actionButtonStyle`Deprecated	`CSSProperties`	—
No effect, as in sonner. Style the buttons with the toast's `actionButtonStyle` / `cancelButtonStyle` or the Toaster's `toastOptions`.

Duration

toast("Saved", { duration: 10000 });

// Stays until the user or your code dismisses it
toast("Connection lost", { duration: Number.POSITIVE_INFINITY });

Hovering the toasts, pressing on them, or hiding the tab pauses every timer.

Callbacks

import { $ } from "@qwik.dev/core";

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

Position

toast("Copied to clipboard", { position: "top-center" });

Toasts that must stay

toast.warning("You have unsaved changes", {
  duration: Number.POSITIVE_INFINITY,
  dismissible: false,
  action: { label: "Save", onClick$: $(() => save()) },
});