Undo toast

A toast after a delete with a button that restores the record from the trash. It loads its data on the server through the block's client.

The trash block

Build it with AI

Paste this into your coding agent. It builds the web version.

Build "Undo toast" in a React web app that uses shadcn/ui components. A toast after a delete with a button that restores the record from the trash.

It uses the better-supabase `trash` block (Trash). It loads its data on the server through the block's client.

Steps:

1. If the app doesn't have the block yet, add the SQL with `npx better-supabase add trash` and apply the migration.
2. Add the shadcn components the recipe uses: `npx shadcn add sonner`.
3. The recipe needs no glue: it calls the block's client on the server.
4. Write the component. Load the data on the server with the block's client, starting from the recipe's snippet (`apps/examples/nextjs/src/features/trash/components/undo-toast.tsx`). Adapt it to the app's existing components, styling and data loading instead of copying it as is.
5. Check the result against the recipe and the block's docs: it typechecks, it reads the same block data, and it handles the loading and empty states the snippet handles.

Read the full code first:

- Recipe: https://bettersupabase.com/recipes/undo-toast.md
- Block docs: https://bettersupabase.com/docs/blocks/trash

No screenshot yet. Run the Next.js example (pnpm dev:example) to see it.

1
Add the components
terminal
```
npx shadcn add sonner
```
Install the glue
Install the block with npx better-supabase add trash. The glue items are copied into your app, so edit them as you need.
None: the page calls the block's client on the server.

Write the component

React and shadcn

View in the example

undo-toast.tsx

"use client";

import { useAction } from "better-supabase/react";
import { useExtracted } from "next-intl";
import { toast } from "sonner";

import { useErrorMessage } from "@/lib/use-error-message";

import { restoreTrashItem } from "../trash-actions";

export interface TrashedRecord {
  /** The trash item the delete returned. */
  readonly trashItemId: string;
  readonly name: string;
}

/**
 * Returns `show`, which confirms a delete with a toast whose Undo button
 * restores the record's whole trash batch.
 */
export function useUndoToast() {
  const t = useExtracted("trash");
  const errorMessage = useErrorMessage();

  const restore = useAction(restoreTrashItem, {
    onSuccess: () => {
      toast.success(t("Restored"));
    },
    onError: (error) => {
      toast.error(errorMessage(error));
    },
  });

  return function show({ trashItemId, name }: TrashedRecord) {
    toast(
      <span data-recipe="undo-toast">
        {t("{name} moved to the trash", { name })}
      </span>,
      {
        action: {
          label: t("Undo"),
          onClick: () => {
            void restore.run({ id: trashItemId });
          },
        },
      },
    );
  };
}

Build "Undo toast" in a React web app that uses shadcn/ui components. A toast after a delete with a button that restores the record from the trash. It uses the better-supabase `trash` block (Trash). It loads its data on the server through the block's client. Steps: 1. If the app doesn't have the block yet, add the SQL with `npx better-supabase add trash` and apply the migration. 2. Add the shadcn components the recipe uses: `npx shadcn add sonner`. 3. The recipe needs no glue: it calls the block's client on the server. 4. Write the component. Load the data on the server with the block's client, starting from the recipe's snippet (`apps/examples/nextjs/src/features/trash/components/undo-toast.tsx`). Adapt it to the app's existing components, styling and data loading instead of copying it as is. 5. Check the result against the recipe and the block's docs: it typechecks, it reads the same block data, and it handles the loading and empty states the snippet handles. Read the full code first: - Recipe: https://bettersupabase.com/recipes/undo-toast.md - Block docs: https://bettersupabase.com/docs/blocks/trash

Write the component

React and shadcn

View in the example

undo-toast.tsx

"use client";

import { useAction } from "better-supabase/react";
import { useExtracted } from "next-intl";
import { toast } from "sonner";

import { useErrorMessage } from "@/lib/use-error-message";

import { restoreTrashItem } from "../trash-actions";

export interface TrashedRecord {
  /** The trash item the delete returned. */
  readonly trashItemId: string;
  readonly name: string;
}

/**
 * Returns `show`, which confirms a delete with a toast whose Undo button
 * restores the record's whole trash batch.
 */
export function useUndoToast() {
  const t = useExtracted("trash");
  const errorMessage = useErrorMessage();

  const restore = useAction(restoreTrashItem, {
    onSuccess: () => {
      toast.success(t("Restored"));
    },
    onError: (error) => {
      toast.error(errorMessage(error));
    },
  });

  return function show({ trashItemId, name }: TrashedRecord) {
    toast(
      <span data-recipe="undo-toast">
        {t("{name} moved to the trash", { name })}
      </span>,
      {
        action: {
          label: t("Undo"),
          onClick: () => {
            void restore.run({ id: trashItemId });
          },
        },
      },
    );
  };
}

Add the components

Install the glue

Write the component

React and shadcn

Add the components

Install the glue

Write the component

React and shadcn