how to hide the X at the top of the shadcn dialog box?

Question

The shadcn/ui dialog box by default as a X at the top right hand corner. My design does not have the X. How to hide the X while retaining the esc to close functionality ?

Thanks very much.

Answer 1

If you don't want to edit the Dialog component directly, you can add this class to DialogContent:

<DialogContent className="[&>button]:hidden">

This way the close button will be hidden.

Answer 2

The current accepted answer ( and also the most upvoted) has problems depending on how you wish to implement the dialog close button.

The most upvoted answer:

<DialogContent className="[&>button]:hidden">

has some problems:

• hides any other button element added directly inside the DialogContent as child.

• the current accepted answer's approach gets overriden when you update shadcn ui.

This new solution:

<DialogContent className="[&>button:last-child]:hidden">

• doesn't need you to remove <DialogPrimitive.Close> used by shadcn.

• you can use the <DialogClose> or nest any <button> inside the <DialogContent> without worrying about it being hidden by [&>button]:hidden.