app/components/ui/toast.tsx

@@ -41,7 +41,7 @@ const toastVariants = cva(
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
+    VariantProps<typeof toastVariants> & { cancelMutation?: () => void }
 >(({ className, variant, ...props }, ref) => {
   return (
     <ToastPrimitives.Root

app/components/ui/toaster.tsx

@@ -1,5 +1,6 @@
 import {
   Toast,
+  ToastAction,
   ToastClose,
   ToastDescription,
   ToastProvider,
@@ -13,7 +14,8 @@ export function Toaster() {
 
   return (
     <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
+      {toasts.map(function ({ id, title, description, action, cancelMutation, ...props }) {
+        const undoButton = cancelMutation ? <ToastAction altText="Undo" onClick={cancelMutation}>Undo</ToastAction> : undefined
         return (
           <Toast key={id} {...props}>
             <div className="grid gap-1">
@@ -23,6 +25,7 @@ export function Toaster() {
               )}
             </div>
             {action}
+            {undoButton}
             <ToastClose />
           </Toast>
         )

app/data/notification-provider.ts

@@ -1,26 +0,0 @@
-import { NotificationProvider } from "@refinedev/core";
-import { ToastAction } from "~/components/ui/toast";
-import { toast } from "~/components/ui/use-toast";
-
-export const notificationProvider = (): NotificationProvider => {
-  
-  return {
-    open: ({
-      key,
-      message,
-      type,
-      description,
-      undoableTimeout,
-      cancelMutation,
-    }) => {
-      toast({
-        variant: type,
-        key,
-        title: message,
-        description,
-        duration: undoableTimeout,
-      })
-    },
-    close: () => {}
-  }
-};

app/data/notification-provider.tsx

@@ -0,0 +1,40 @@
+import type {
+  NotificationProvider,
+  OpenNotificationParams,
+} from "@refinedev/core";
+import type { ToastActionElement } from "~/components/ui/toast";
+import { toast } from "~/components/ui/use-toast";
+
+interface Provider extends Omit<NotificationProvider, "open"> {
+  open: (
+    params: Omit<OpenNotificationParams, "type"> & {
+      action?: ToastActionElement;
+      type: "default" | "destructive";
+    },
+  ) => void;
+}
+
+export const notificationProvider = () => {
+  return {
+    open: ({
+      key,
+      message,
+      description,
+      undoableTimeout,
+      cancelMutation,
+      action,
+      type,
+    }) => {
+      toast({
+        variant: type,
+        key,
+        title: message,
+        description,
+        duration: undoableTimeout,
+        action,
+        cancelMutation,
+      });
+    },
+    close: () => {},
+  } satisfies Provider;
+};

app/routes/reset-password.tsx

@@ -9,7 +9,8 @@ import { Field } from "~/components/forms";
 import { getFormProps, useForm } from "@conform-to/react";
 import { z } from "zod";
 import { getZodConstraint, parseWithZod } from "@conform-to/zod";
-import { useToast } from "~/components/ui/use-toast";
+import { ToastAction } from "~/components/ui/toast";
+import { useNotification } from "@refinedev/core";
 
 export const meta: MetaFunction = () => {
   return [{ title: "Sign Up" }];
@@ -19,7 +20,7 @@ const RecoverPasswordSchema = z.object({
   email: z.string().email(),
 });
 export default function RecoverPassword() {
-  const { toast } = useToast();
+  const { open } = useNotification();
   const [form, fields] = useForm({
     id: "sign-up",
     constraint: getZodConstraint(RecoverPasswordSchema),
@@ -28,13 +29,16 @@ export default function RecoverPassword() {
     },
     onSubmit(e) {
       e.preventDefault();
-      
-      toast({
-        title: "Password reset email sent",
+      open?.({
+        type: "success",
+        message: "Password reset email sent",
         description: "Check your email for a link to reset your password. If it doesn’t appear within a few minutes, check your spam folder.",
-        variant: "success",
-        key: "reset-password-email-sent",
-      });
+        action: <ToastAction altText="Cancel">Cancel</ToastAction>,
+        cancelMutation: () => {
+          console.log("cancel mutation");
+        },
+      })
+      
     }
   });