How to Hide the Close Button (X) in Shadcn Dialog Box

The Shadcn Dialog component includes a default close button (X) at the top-right corner. However, some designs might require removing this button while keeping the ESC key functionality intact. In this guide, we’ll explore various methods to hide the close button in the Shadcn Dialog component.

The Problem

By default, the DialogContent in Shadcn includes a <DialogPrimitive.Close> component, rendering the close button (X). While it’s useful for most use cases, there are scenarios where this button isn’t needed.

Solutions

1. Using Tailwind CSS to Hide the Close Button

You can hide the close button by targeting the DialogPrimitive.Close button with Tailwind CSS. Add the className attribute to DialogContent:

Implementation:

<DialogContent className="[&>button]:hidden">
  <p>Your dialog content here.</p>
</DialogContent>

Explanation:

• [&>button]:hidden: This hides the direct child <button> element within DialogContent, effectively removing the close button.

Considerations:

This approach hides all buttons that are direct children of DialogContent. If you add other buttons directly, they will also be hidden. To avoid this, use a more specific selector as described in the next solution.

2. Hiding Only the Close Button

To target only the close button without affecting other buttons, use:

Implementation:

<DialogContent className="[&>button:last-child]:hidden">
  <p>Your dialog content here.</p>
</DialogContent>

Explanation:

• [&>button:last-child]:hidden: This targets the last child button, which is typically the close button, and hides it.

3. Customizing the Dialog Component

You can customize the DialogContent component to add a hideClose prop for more control. This approach ensures flexibility and prevents unintended side effects when updating your UI.

Customized DialogContent:

import { DialogPrimitive } from '@radix-ui/react-dialog'
import { X } from 'lucide-react'

const DialogContent = React.forwardRef(({ children, className, hideClose, ...props }, ref) => (
  <DialogPrimitive.Content
    ref={ref}
    className={`relative p-4 sm:rounded-lg ${className}`}
    {...props}
  >
    {children}
    {!hideClose && (
      <DialogPrimitive.Close className="absolute right-4 top-4">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    )}
  </DialogPrimitive.Content>
))

DialogContent.displayName = 'DialogContent'
export default DialogContent

Usage:

<DialogContent hideClose>
  <p>Your dialog content here.</p>
</DialogContent>

Explanation:

• hideClose Prop: Conditionally renders the close button based on the prop value.
• Customizable: Allows reusability across your project without impacting library updates.

4. Editing the Source Code (Not Recommended)

You can comment out the DialogPrimitive.Close component directly in the source file. However, this approach isn’t recommended as it:

• Makes future updates challenging.
• Can lead to inconsistencies across your team.

If you still choose this method, navigate to your dialog component and comment out the following block:

Example:

{
  /* <DialogPrimitive.Close className="absolute right-4 top-4">
  <X className="h-4 w-4" />
  <span className="sr-only">Close</span>
</DialogPrimitive.Close> */
}

5. Using Tailwind’s w-[calc()] for Layout Adjustments

Instead of hiding the button, adjust its positioning to move it out of view. This approach is a workaround and should be used cautiously.

Example:

<DialogContent className="relative w-full sm:max-w-lg [--close-button-position:-100px]">

Best Practices

• Avoid Source File Modifications: Use custom components or CSS overrides instead.
• Ensure Accessibility: Retain ESC key functionality for dismissing dialogs.
• Test Responsiveness: Verify that your changes work well across all screen sizes.

Conclusion

Hiding the close button in Shadcn’s Dialog component can be achieved through CSS overrides, custom components, or specific prop-based configurations. By following the solutions outlined here, you can maintain design consistency and flexibility without compromising functionality.

Key Takeaways

• Use [&>button]:hidden for quick fixes but prefer [&>button:last-child]:hidden for specificity.
• Customize DialogContent to add a hideClose prop for reusable and scalable designs.
• Avoid modifying library source files to ensure compatibility with future updates.

Implement these techniques to refine your Shadcn Dialog components effectively!