How to replace default close button for Dialog ?

[apudiu]

Hello, it may be so obvious but I didn't found way to replace default close button with my custom icon, In the docs I've found that custom close button can be added but didn't mentioned how to hide the existing one or replace the icon.

I really like this UI, unfortunately the docs seems very incomplete. Can I get some help on this?

Why this is an issue? becoz I think there's should be way to hide / replace default close button.

[vitorsorato]

I have the same doubt.

[servesh-chaturvedi]

Did you check this?

[vitorsorato]

The issue would be to remove the current close button in order to replace it with a custom one.

[Medkhat]

Hi there! When you will install the Sheet component, you will also able to customize this component. For example, you have a components/ui/sheet.tsx, so open this file and customize the component below:

[yogiyendri]

Hi there! When you will install the Sheet component, you will also able to customize this component. For example, you have a components/ui/sheet.tsx, so open this file and customize the component below:

but, what if we want to use sheet on various pages and with different closed shapes.

[Medkhat]

@yogiyendri Hi! You can separately declare this button and call it whenever you need ))

1. Declare like this

2. Use when you want

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[myketheguru]

Hello, it may be so obvious but I didn't found way to replace default close button with my custom icon, In the docs I've found that custom close button can be added but didn't mentioned how to hide the existing one or replace the icon.

I really like this UI, unfortunately the docs seems very incomplete. Can I get some help on this?

Why this is an issue? becoz I think there's should be way to hide / replace default close button.

If you want to use your own custom icon, either in the Dialog or in the Sheet, you might need to add an extra prop to allow for this.

1. Open the dialog file in your components folder

• This could be @/components/ui/dialog

2. Next, create a custom type

type ModifiedDialogContentType = React.ForwardRefExoticComponent< (DialogPrimitive.DialogContentProps & { removeCloseIcon?: boolean }) & React.RefAttributes<HTMLDivElement>

;

3. Replace the types passed in forwardRef from typeof DialogPrimitive.Content to ModifiedDialogContentType. The DialogContent component should look like this

const DialogContent = React.forwardRef< React.ElementRef<ModifiedDialogContentType>, React.ComponentPropsWithoutRef<ModifiedDialogContentType>

(({ className, children, removeCloseIcon, ...props }, ref) => ( <DialogPortal> <DialogOverlay /> <DialogPrimitive.Content ref={ref} className={cn( "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className )} {...props} > {children} {removeCloseIcon ? null : ( <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 </DialogPrimitive.Close> )} </DialogPrimitive.Content> </DialogPortal> ));

Note how I used conditional rendering to hide/show the close button, by defining a prop called removeCloseIcon. Now you can disable the close icon where and when you do not need it.

...

Thanks

[SURVI1508]

Did you check this?

here i want to hide default close (x) button place on top right.

[iasenovets]

Did you check this?

here i want to hide default close (x) button place on top right.

you managed to?

[siradji]

removeCloseIcon

@ArsenKakasyan , I did get to hide it using ref. It is the only child of type button in the dialog content that is why i used a generic selector. You can be more specific with the selector. Not the best way of doing this but it works fine for me.

import React, {useEffect, useRef} from 'react';
import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle} from "@/components/ui/dialog";

export const PaywallDialog: React.FC<{open: boolean}>= (props) => {
    const ref= useRef<HTMLDivElement | null>(null)

    useEffect(() => {
        if(ref?.current) {
            ref.current?.querySelector(`button`)?.remove()
        }
    }, [])
    return (
        <Dialog  open={props.open} modal={true} defaultOpen={true} >
            <DialogContent autoFocus={false} ref={ref} className="sm:max-w-[425px]">
                <DialogHeader>
                    <DialogTitle className="text-xl text-center">Account approval pending</DialogTitle>
                    <DialogDescription className="text-center">
                        Please contact Nana Admin to get your account approved
                    </DialogDescription>
                </DialogHeader>
                <div>
                </div>
            </DialogContent>
        </Dialog>
    )
};

[t2tx]

It can be controled by adding attribute to DialogContent.

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
    hideCloseButton?: boolean;
  }
>(({className, children, hideCloseButton, ...props}, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
        className,
      )}
      {...props}>
      {children}
      {!hideCloseButton && (
        <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>
      )}
    </DialogPrimitive.Content>
  </DialogPortal>
));
DialogContent.displayName = DialogPrimitive.Content.displayName;