Toggle Sidebar B
AppearanceLight & dark mode D

Sonner

Toast notification system. Drop Toaster once at the app root and call toast() from anywhere to show a transient message. For a persistent inbox the user can revisit, use Notifications.

Default

Trigger a toast from a Button click.

Replay preview

Variants

Success, error, info, warning.

Replay preview

Types

Each type maps to a method on toast — the plain default plus toast.success, toast.error, toast.warning, and toast.info.

Replay preview

Sound & haptics

Both are off by default. Opt in on the Toaster at the app root with <Toaster sound vibration />, and every toast type gets a short sound plus a very subtle haptic tap. Loading toasts stay silent; a toast.promise plays once when it settles. Sound starts after the first user interaction (browser autoplay policy). These docs run the Toaster on its defaults, so the previews below are silent.

Replay preview

With description

Pass a description in the options object for a secondary line under the title.

Replay preview

Position

A toast can override the Toaster's global anchor per call with the position option. Without it, toasts use the Toaster's position prop (bottom-right by default).

Replay preview

API Reference

Toaster

PropTypeDefaultDescription
position"top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center""bottom-right"Anchor for the stack.
richColorsbooleanfalseUse coloured variants instead of plain.
expandbooleanfalseExpand stack on hover instead of overlapping.
progressBarbooleantrueShow a full-size auto-dismiss progress fill behind each toast. Pauses on hover; follows the global duration; disabled when expand is on.
soundbooleanfalsePlay a short per-type sound when a toast appears. Needs one prior user interaction (browser autoplay policy); silent for loading toasts and dismissals.
vibrationbooleanfalseVery subtle per-type haptic tap where navigator.vibrate is supported (Android). Skipped under prefers-reduced-motion.
SlotDescription
info-iconOverride the icon used for info toasts.
success-iconOverride the icon used for success toasts.
warning-iconOverride the icon used for warning toasts.
error-iconOverride the icon used for error toasts.

toast() (function)

PropTypeDefaultDescription
messagestringFirst argument. The body of the toast.
options{ description?, action?, duration?, ... }Second argument with extra config.