Feedback

Toaster

The fixed-position stack that renders and positions active toasts.

html
<UiToaster />

Position

position sets which corner the stack sits in. Change it below and send a toast to watch it move.

` instance." class="w-full" />

Expand

expand lists every toast in full. Turned off they collapse into a peeking stack that expands on hover — worth it when toasts arrive in bursts and a full list would take over the corner of the screen.

This is the container, not the toasts themselves — position/expand here apply globally to every toast, regardless of where in the app it was added.

Max

max sets how many toasts render at once. Beyond it, the oldest drop off rather than the stack growing without limit.


API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
ToasterPosition
'bottom-right'
Falls back to the shared toaster config (see `useToasterOptions`) when omitted.
boolean
true
When false, toasts collapse into a peeking stack instead of a fully expanded list. Falls back to the shared toaster config when omitted.
number
5
Maximum number of toasts rendered at once.

Types

ts
type ToasterPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";