Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Overriding default shadcn attributes?

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.

Tags:

2

Answers


  1. 0

    There is no way to remove the default close button. But you can remove it from the dialog.tsx file, or you use a custom prop to handle it.

    To create a custom close button you can use the DialogClose component.

    <DialogClose asChild>
  <Button type="button" variant="secondary">
    Close
  </Button>
</DialogClose>

    Here is the documentation from the shadcn docs Custom close button

    Login or Signup to reply.
  2. 0

    You can change the styles, such as the default position of the close button, by editing the dialog.tsx file. To achieve this, you just need to modify this specific part of the code in the const DialogContent variable. Here you have acces to both the style classes for the closing icon "X" (which is being imported from lucide-react) and its according container (DialogPrimitive.Close).

    <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
    <X className="h-4 w-4" />
    <span className="sr-only">
        Close
    </span>
</DialogPrimitive.Close>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search