shadcn.io is not affiliated with official shadcn/ui
Success Toast Notification Block for Svelte
The settings page of a form builder with its Save settings button: two success toasts are drawn on the page, and pressing Save raises a real toast through the block's own toaster, stacking up to three.
Installation
Overview
Tell people that a save worked, with this success toast for Svelte with Ark UI. It's the settings page of Formwren, a form and survey builder, drawn in greys inside a hairline frame with a plus mark on each corner: a top bar, a settings menu and three fields. The real Save settings Shine Button sits on the top bar, and at the foot end of the page two success toasts are drawn in place, newest last, each with an icon, a title, one line and a Dismiss button, wearing the look of the catalog's Toast. Press Save settings and the block raises a real toast through its own toaster: it appears at the end of the screen, in its own live region, and waits while the pointer or keyboard focus is on it. Press again and the toasts stack, three at most, the oldest leaving as the fourth arrives. It's built from Toast, Button, Shine Button and Guides, with CSS motion only. For settings pages, editors and any app where a quiet confirmation beats a dialog.
FAQ
Why are two toasts already on the page, and what do I keep?
So you can see a toast without pressing anything: on load the stack is drawn in place at the stage's foot end, using the catalog toast's own classes, newest last. Save settings raises a real toast and the drawn stack stays gone until a reload, as the invite dialog's in-place copy does. In your app keep the toaster and the raise call, and drop the drawn copy: the "in-place" state, DrawnToast and the ol in the frame.
How is the real toast raised on each library?
createToaster({ max: 3, overlap: true, placement: "bottom-end" }), renders <Toaster toaster={toaster} /> once, and raises a toast with toaster.create({ id, type: "success", title, description, duration }). Calling create again with the same id updates that toast in place.The block wraps the call in raise(note), so the rest of the file doesn't care which library is under it.How long does a toast stay, and can it be held?
Six seconds when nothing holds it. Hovering a toast or moving keyboard focus onto it pauses the wait, and it resumes when you leave. Nothing here needs the toast to be seen in time: the status line and the page say the same thing, and a toast with an action never times out. Change STAY to make it longer or shorter.
Why only three at a time?
A toaster that keeps every toast turns a burst of saves into a wall. Each press raises a toast with its own id; when a fourth arrives the block takes the oldest away with its exit, so the toasts on screen are always the last three. The toaster's own limit is three too, so the two agree on every library.
Is it accessible?
The real toasts live in a live region that speaks each toast once and never takes focus, so Save settings keeps it. Every toast has a close button and, while one is on screen, Alt+T moves focus to the stack and Escape closes the focused toast. The drawn copy is a list named "Notifications" with a Dismiss button per toast that names it, and a polite status message says what happened. The check icon is foreground, never a status color, and with reduced motion nothing slides.
What stays local?
Everything. Nothing is saved or sent: the settings are a drawing, the toasts are the only result, and the block says so in its status message. The copy is two constants at the top of the file (DRAWN and the note inside save); in your app, raise the toast from the response of your own save request, and raise an error toast when it fails.