toast

in both modes

three toasts, the newest in front. the two behind peek 12 px above it, and hovering the stack spreads them 12 px apart. the stack moves by whole pixels and never scales, so the screen on its contact edge keeps its 1 px cells.

each type prints its status glyph in its own ink: success the tick, info the i, warning the pause, error the cross. loading shows the i.

contact edgedraws where a floating layer meets the page, under its soft lift

try it

these go to a real toaster in the corner of the window, in the page’s mode. each one leaves after 5 seconds; hover or focus the stack to hold it. loading waits on a promise, then turns into a success.

parts

base-nova’s toast, on base ui’s toast manager. put <Toaster /> near the root once, then call toast from anywhere.

toast.add

shows a toast and returns its id. it takes title, description, type and actionProps for its one action; type picks the glyph.

toast.promise

one toast that follows a promise, from loading to success or error.

toast.update

changes a toast in place, by its id.

toast.close

closes one toast by its id, or every toast with no id.

Toaster

the stack in the window’s corner. pass toastManager to give it a manager of its own.

Toast

the parts the stack is built from, with ToastContent, ToastTitle, ToastDescription, ToastAction and ToastClose, for a stack of your own under ToastProvider and ToastViewport.

ToastList

the provider’s toasts as Toaster prints them. put it in a viewport of your own to show the stack somewhere else, as this page does above. actions takes each toast and returns its action row, so a toast can carry more than its one action: the front toast above adds a ghost undo, named in its data. by default the row holds the one action.

ToastIcon

the status glyph for a toast’s type, for a toast you build from the parts.