Changing Blueprint Dialog close button style

[arifsuleman]

Environment

• Package version(s):
• Browser and OS versions:

Question

Dear Support,
I am using Blueprint Dialog component to my reactjs app. I need to change the close button style of Dialog i.e default close button that shows on right corner of dialog window, Could you plz advise how to do that.
thanks

[adidahiya]

It depends on which part you want to customize, but generally you should open up the DOM inspector and find the relevant CSS classes which you want to override:

Then add custom CSS to your application which applies additional custom styles to those CSS selectors.

[arifsuleman]

Hello,
I did use the same class name "bp3-button bp3-minimal bp3-dialog-close-button" and they have the two attributes box-shadow: none; and -webkit-box-shadow: none; . I noticed removing them in inspect element gives me the border but what should be the correct approach/style attribute value to override them. I would appreciate if you plz provide some sample style to apply.
thanks

[igor-volk-red-deer]

Is there a way to override the svg the button uses?

[adidahiya]

@igor-volk-red-deer no. If you need to customize the dialog appearance that much, I would suggest building your own using <Overlay> (you can use the <Dialog> implementation as a template).

[igor-volk-red-deer]

Thank you for clarifying @adidahiya