Way to add closeIcon to <Dialog />
See original GitHub issueI have gotten a lot of user feedback that users don’t understand how to close Dialogs. They don’t understand that they can press esc
nor that they can just click anywhere outside the Dialog to close it.
- This is not a v0.x issue.
- I have searched the issues of this repository and believe that this is not a duplicate.
Expected Behavior
I’d like an option to include a “closeIcon” that should be shown top right, like facebook has for all their Dialogs
Current Behavior
Users don’t understand how to close dialogs
Examples
Context
I’m trying to make my app easier to use. Is there a way to extend <Dialog />
without needing to re-implement all of the <Dialog />
behaviour?
Issue Analytics
- State:
- Created 5 years ago
- Reactions:3
- Comments:10 (8 by maintainers)
Top Results From Across the Web
How to add close icon in Material UI Dialog Header top right ...
Put the image icon in the title, and use the css to position it correctly ... import CloseIcon from '@material-ui/icons/Close'; <DialogTitle ...
Read more >Way to add closeIcon to <Dialog /> · Issue #13520 - GitHub
I have gotten a lot of user feedback that users don't understand how to close Dialogs. They don't understand that they can press...
Read more >How to Add icons to Dialog buttons in JavaScript Dialog control
You can add icons to the dialog buttons using the buttons property or footerTemplate property . For detailed information about dialog ...
Read more >How to add close icon in Material UI Dialog Header top right ...
Put the image icon in the title, and use the css to position it correctly, Try this: Apply this css on close image:...
Read more >How can I remove the 'X' close button of the dialog.
The dialog made by record action has 'X' close button by default. Is there a way that I can remove this? When I...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@oliviertassinari what about a opt-in option? There are many cases where, because of the layout distribution, the icon inside the modal is not a good option. For example, in this Instagram modal, if the icon where inside the modal it could “conflict” with the Follow action in some cases.
While there’s a way to include an icon inside the modal, there’s no option to place it on the overlay, right? I believe this could benefit some projects.
@alxsnchez You are right, but I believe it would be beneficial to more people if it was displayed at the top right corner of the dialog rather than the overlay.