question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Way to add closeIcon to <Dialog />

See original GitHub issue

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 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

image

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:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:10 (8 by maintainers)

github_iconTop GitHub Comments

5reactions
alexsanchezdevcommented, Dec 7, 2018

@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.

image

3reactions
oliviertassinaricommented, Dec 6, 2018

@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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found