Toast

Transient notices via pushAlert: tones, durations, actions, and custom controls inside the toast.

Variants

pushAlert.info / .success / .warning / .error

Spam the button: the same message replaces in place instead of stacking

Sonner can't mutate a live duration, so the spinner toast is replaced by its result under the same id

One call: spinner while pending, replaced by the outcome under the same id

options.controls adds action buttons; they inherit the alert's content color

The stack sits bottom-right by default now; the Toasts mount takes any Sonner position

This page mounts <Toasts /> with the default: fire any toast above and watch the bottom-right corner.

duration -1 stays until dismissed; error toasts get a copy button by default

Mounted once in the app shell; every pushAlert on this page renders through it

<Toasts /> // this gallery mounts it in app/layout.tsx

The pusher as a hook: consumers depend on a stable interface they can stub, not on Sonner directly

Every className the component exposes, and what it reaches