How to build an undo toast

A confirm dialog before every delete slows people down and they click through it anyway. Doing the action and offering Undo in a toast is faster, and safer if the undo actually works.

Try it:

The code

import { toast } from '@yusufceng1z/ding-react';

      toast.success('Message deleted', {
        action: {
          label: 'Undo',
          onClick: () => {
            restore();
            return { type: 'info', title: 'Restored' };
          },
        },
      });

The click handler may return a patch. When it does, the toast changes in place to Restored instead of closing, so the person gets confirmation that the undo worked. The same code works with @yusufceng1z/ding-svelte and @yusufceng1z/ding, only the import differs.

Making the undo real

Do not delete for good when the button is shown. Mark the item as deleted first, and remove it only after the undo window has passed, or never, if you keep a trash. Otherwise Undo is a promise you cannot keep when the request has already finished.

A toast with a button stays until dismissed in Ding, so nobody is racing a timer. Still, keep a second way back, such as a trash view. A toast is easy to miss, and for some people it is hard to reach, see toast accessibility.

More on when toasts are the right tool: toast notification UX.