I want to create a Dialog using ShadCN component library, but it has a built in close button on top right, but I want it to be somewhere else, let’s say I want to make it as a button below, how can I make it happen? I tried to create a different somewhere else and gave it an asChild attribute but that didn’t work. I think I am missing something big. Thanks everyone for help.

This is my current code and how it looks in frontend.

"use client";
import { Dialog, DialogContent, DialogTrigger, DialogTitle } from "@/components/ui/dialog"; //shadCN components
import { Button } from "@/components/ui/button";
import { DialogClose } from "@radix-ui/react-dialog";

export default function Home() {


  return (
    <main>
      <Dialog>
        <DialogTrigger>
          <div>XXX</div>
        </DialogTrigger>

        <DialogContent className="transition delay-0 duration-0">
          
          <DialogTitle>
            asda
          </DialogTitle>
          
          <DialogClose asChild={true}>
            <Button>Close</Button>
          </DialogClose>

        </DialogContent>
      </Dialog>
    </main>
  );
}

visual

I try to make the x on top right disappear.