Label to dismiss a dialog box?

Question

I have a dialog box that is asking a user to confirm the cancellation of a task.

Since the main CTA already says, "Yes, cancel this task", it might be confusing for the action to exit the dialog to also say, "Cancel."

We are using Material UI here so we don't have an "x" dismiss icon on the upper right hand corner of the dialog, but even then, I think a prominent exit button is still warranted.

What should this label say to clearly communicate to the user that they are dismissing the dialog? Other ideas - No, don't cancel this task, Close, Close without canceling, etc...?

Answer 1

To avoid the confusion you're referring to, make both buttons about the task and not about the dialog. I would keep the "Yes, cancel this task" and make the other one "Keep this task".

Answer 2

"Cancel the cancel action" is not really clear, so explain what will happen and give the buttons a verb that more accurate tells what the result of the action will be. Make every element in the dialog count:

• A title is a quick reference to the kind of dialog/modal
• The body text shows what the subject is, what will happen with it and tells the user how to continue
• An icon can be used to raise awareness to caution and careful reading of the instruction
• The buttons should start with a verb (optionally emphasized in bold)
• Extra space between buttons can also emphasize the importance of the choice

Much is emphasized in this example to show what is possible to make things clear, but of course you have to adapt the content to what is appropriate in the context in which it is used.