Designing warning/confirmation dialogue box

Question

Currently working on a design which will prompt a dialogue box with confirmation message. Just some background on the design, when user attempt to add or delete data from a grid, a dialogue box will appear warning the users that if they were to add or delete now, all changes made will get refreshed not unless if they save it first.

I am now looking for examples on how should I word my dialogue box. I've search for some examples from Microsoft but I doesn't seems to be quite fit. Is there anywhere I can search for better example and what should I need to focus on when designing the warning/confirmation dialogue box?

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

For an alert, the main elements and particularities are:

• urgent character;
• requiring user's attention;
• inform about an event / a situation.

Design elements:

• simple design;
• an overlay can help the user focus on the question;

Material design example:

Personal approach:

Answer 2

Taking a look at the Material Design - Dialogs might prove useful.

Some key points to pull out from that documentation:

• Your buttons should be labeled with the action the user is performing by clicking the button.
• The progressive action (typically the add/delete labeled button) is on the right, while the action to remain in the current state (typically a cancel button) is to the left of that. (I'm basing this off the documentation linked above, I don't want to start a holy war.)