Sonner

Which message should disappear and which should stay?

A toast is a small message that appears after an action. It can confirm a saved draft without moving the reader. If a form needs a correction, show the message by the field so it is still there when the reader returns to it. Wait for the app’s save result before saying it worked.

What does your app still need to test?

Sonner provides a React Toaster component and calls for displaying messages. The library is MIT-licensed. Choose the text, duration and any action for the toast. Check whether the message is announced, whether actions work from the keyboard and whether a small screen still shows what matters. Keep durable status or history in your own app.

Can someone tell whether a fictional draft was saved?

Draw a note editor with one successful save and one failed save.

1. 1
   Write two clear messages

   Mark when the save succeeded and what someone can do when it failed.
2. 2
   Decide what stays on the page

   Give the failed save an explanation that remains visible after a toast disappears.