Help me make this dialog intuitive

It's a pretty simple use case.

I have a modal with an editable form. If the user enters something into the form and then tries to cancel, we want to warn them they have unsaved changes, which they'll lose if they proceed.

For some reason, this dead-simple UX has proven tricky to execute. Whichever combination of colors and text I try, it feels confusing. Even I, as the developer, have to stop every time and carefully consider the options.

Here's how it looks currently:

enter image description here

enter image description here

  • Color is yellow, which is branded as "warning" in the UI. It also has a warning icon.
  • The title says: "You have unsaved changes"
  • The question is "Are you sure you wish to close?"
  • To the left is a neutral-looking "Don't close" button.
  • To the right is a "Close" button with a warning icon, with "secondary action" color that matches the original "Cancel" button.
  • "Don't close" is the default focused option

Note that this needs to be somewhat generic, as it's used all over the place.

Does anyone have any ideas how this can be improved?

Tags: , , , , , ,