I’m using shadcn in my React Remix app, and I’m trying to prevent it from redirecting to another page when I click to open a dialog. Currently, clicking on <Link/> functions correctly, but when I click on , it shouldn’t redirect me; instead, it should simply open the dialog.”

*Inbox.tsx

export default function Inbox() {
  const data = useLoaderData<typeof loader>();

    return (
        <div>
            <h1 className="text-xl font-bold">Inbox ({data.length})</h1>

            <div className="flex flex-col border-solid border rounded-md mt-10">
                {data.map((item) => {

                    return (
                        <>
                            <Link
                                to={`/inbox/${item.id}`}
                                className="w-full border-b hover:shadow-md cursor-pointer"
                            >
                                <button
                                    key={item.id}
                                    className={cn(
                                        "flex flex-col items-start gap-2 p-3 text-left text-sm transition-all w-full",
                                    )}
                                    type="button"
                                >
                                    <div className="flex w-full flex-col gap-1">
                                        <div className="flex items-center">
                                            <div className="flex items-center gap-2">
                                                <div className="font-semibold">
                                                    {item.name}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div className="flex w-full flex-col gap-1">
                                        <div className="flex items-center">
                                            <div className="flex items-center gap-2">
                                                <Badge>{item.run.status}</Badge>
                                            </div>

                                         <ApproveDialog id={'some test'} />

                                        </div>
                                    </div>
                                </button>
                            </Link>
                        </>
                    );
                })}
            </div>
        </div>
    );
}

Approve Dialog

import { Send } from "lucide-react";
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "~/components/ui/dialog";
import { Button } from "./ui/button";
import { useToast } from "./ui/use-toast";

export default function ApproveDialog({ id }: { id: string }) {
    const { toast } = useToast();
    return (
        <Dialog>
            <DialogTrigger asChild>
                <Button size="sm" className="rounded-full">
                    <Send size={15} />
                </Button>
            </DialogTrigger>
            <DialogContent className="sm:max-w-[425px]">
                <DialogHeader>
                    <DialogTitle>Ready to send?</DialogTitle>
                    <DialogDescription>
                        Do you want to send this message?
                    </DialogDescription>
                </DialogHeader>
                <DialogFooter>
                    <DialogClose asChild>
                        <Button
                            size="sm"
                            className="bg-success hover:bg-success text-white"
                            type="submit"
                            onClick={async () => {
                                const response = await fetch("/api/send", {
                                    method: "POST",
                                    body: JSON.stringify({ id }),
                                });
                                if (!response.ok) {
                                    toast({
                                        title: "Error",
                                        description: "An error occurred",
                                    });
                                    return;
                                }
                                toast({
                                    title: "Success",
                                    description: "The message has been sent!",
                                });
                            }}
                        >
                            <Send size={15} className="mr-2" /> Send
                        </Button>
                    </DialogClose>
                    <DialogClose asChild>
                        <Button size="sm" variant={"outline"}>
                            Cancel
                        </Button>
                    </DialogClose>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}