`<Toaster />`

Renders the toasts. Add it once, in your root layout; every prop below is optional.

Playground

These controls drive the site's own Toaster — the settings stay while you browse.

position

theme

richColors

expand

closeButton

invert

<Toaster />

Props

Prop	Type	Default
`position`Signal	`Position`	`"bottom-right"`
Where toasts stack: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center` or `bottom-right`. Swipe direction follows it.
`theme`Signal	`"light" \| "dark" \| "system"`	`"light"`
Color scheme. `system` follows `prefers-color-scheme` and its changes.
`richColors`Signal	`boolean`	`false`
Colored backgrounds for success, info, warning and error toasts.
`invert`Signal	`boolean`	`false`
Dark toasts on a light theme and vice versa.
`dir`Signal	`"ltr" \| "rtl" \| "auto"`	`"auto"`
Text direction. `auto` reads `<html dir>` (and keeps tracking it).
`expand`	`boolean`	`false`
Show every toast expanded instead of stacked; otherwise they expand on hover.
`visibleToasts`	`number`	`3`
How many toasts are visible at once; the rest wait behind.
`closeButton`	`boolean`	`false`
Adds a close button to every toast.
`duration`	`number`	`4000`
Default time in ms before a toast closes on its own.
`gap`	`number`	`14`
Space in px between expanded toasts.
`offset`	`string \| number \| { top?, right?, bottom?, left? }`	`"24px"`
Distance from the viewport edges. Numbers are pixels; omitted sides keep the default.
`mobileOffset`	`string \| number \| { top?, right?, bottom?, left? }`	`"16px"`
Same as `offset`, below 600px viewport width.
`swipeDirections`	`("top" \| "right" \| "bottom" \| "left")[]`	`from position`
Directions a toast can be swiped away. Defaults to the vertical edge plus the horizontal side of `position`.
`toastOptions`	`ToastOptions`	—
Defaults for every toast — see below.
`icons`	`ToastIcons`	—
Replace the `success`, `info`, `warning`, `error`, `loading` and `close` icons with your own JSX.
`hotkey`	`string[]`	`["altKey", "KeyT"]`
Keys that expand the toasts and move focus to them. Modifier properties (`altKey`, `metaKey`…) or `KeyboardEvent.code` values.
`id`	`string`	—
Names this Toaster. It then only renders toasts created with a matching `toasterId`; unnamed Toasters render toasts without one.
`topLayer`	`boolean`	`false`
Promote the toaster to the browser top layer (Popover API) so toasts show above `<dialog>` modals and fullscreen elements.
`containerAriaLabel`	`string`	`"Notifications"`
Label of the toasts region; the hotkey is appended (e.g. `Notifications alt+T`).
`customAriaLabel`	`string`	—
Replaces the whole region label, hotkey included.
`class`	`string`	—
Class added to each toast list (`<ol data-sonner-toaster>`).
`style`	`CSSProperties`	—
Inline style for each toast list — handy for CSS variables.
`loadingIcon`Deprecated	`JSXOutput`	—
Use `icons.loading`.
`pauseWhenPageIsHidden`Deprecated	`boolean`	—
No effect: timers always pause while the page is hidden (sonner 2 behaviour).

Changing props at runtime

Props marked Signal also accept a Signal. The Toaster is rendered on the server and resumed, so pass the signal itself — not signal.value — when the value should change after load:

import { component$, useSignal } from "@qwik.dev/core";
import { Toaster, type ToasterProps } from "qwik-sonner";

type Position = Extract<ToasterProps["position"], string>;

export default component$(() => {
  const position = useSignal<Position>("bottom-right");

  return (
    <>
      <Toaster position={position} />
      <button onClick$={() => (position.value = "top-center")}>Move</button>
    </>
  );
});

toastOptions

Defaults applied to every toast; a toast's own options win.

Option	Type	Default
`duration`	`number`	—
Default duration in ms (wins over `duration`).
`closeButton`	`boolean`	—
Close button on every toast.
`class`	`string`	—
Class for every toast element.
`descriptionClass`	`string`	—
Class for every description.
`classes`	`ToastClassnames`	—
Per-part classes, see Styling.
`style`	`CSSProperties`	—
Inline style for every toast.
`actionButtonStyle`	`CSSProperties`	—
Style for action buttons (a toast's own wins).
`cancelButtonStyle`	`CSSProperties`	—
Style for cancel buttons (a toast's own wins).
`unstyled`	`boolean`	—
Drop the default toast styles.
`closeButtonAriaLabel`	`string`	`"Close toast"`
Accessible label of the close button.

Icons

Any key you leave out keeps the default icon. To change one toast's icon use its icon option.

<Toaster
  icons={{
    success: <CheckIcon />,
    info: <InfoIcon />,
    warning: <WarningIcon />,
    error: <ErrorIcon />,
    loading: <Spinner />,
    close: <XIcon />,
  }}
/>

Offset

<Toaster offset={32} />
<Toaster offset="5vh" />
<Toaster offset={{ bottom: 80, right: 24 }} mobileOffset={{ bottom: 64 }} />

Keyboard

Alt + T expands the toasts and moves focus to them; Esc collapses them again.

// ⌘ + K on macOS
<Toaster hotkey={["metaKey", "KeyK"]} />