Confirm dialog

Usage

When to use

Use a confirm dialog in the following cases:

• When important system events occur that require an immediate user action.
• For destructive actions, like deleting something, or consequential actions, like publishing a product.
• Especially for actions that cannot be undone.

Types

There are the following confirm dialog types:

Alert confirm dialog

Use a confirm dialog with the severity state alert to inform and request a decision.

Warning confirm dialog

Use a confirm dialog with the severity state warning to inform about possible consequences and request a decision.

Information confirm dialog

Use a confirm dialog with the state information to inform the user about something.

Custom confirm dialog

Use a custom confirm dialog to inform the user about app specific or system tools related actions and optionally request a decision.

General construction

A confirm dialog consists of the following elements:

1. Title

• Present the action as a short sentence or question in the title.

2. Text

• Explain the outcome of the action in the confirmation text.
• Inform users about the consequence of their action.
• Keep the text short, simple and focused.

3. Footer bar with buttons

• A footer bar helps to separate the content area from the buttons.
• Restate the action in the confirmation buttons. Instead of generic button labels like Yes/No or OK/Cancel, provide options that summarize what will happen for each possible action.
• In an information confirm dialog the second button is optional.

4. Icon

• Use the icon to emphasize the meaning of the current action.

5. Top border

• Use the top border to emphasize the meaning of the current action.
• Icon and top border must have the same color.

6. Background

• The confirm dialog has a drop shadow.

7. Overlay

• The screen dimming overlay is always located above all other content.
• It lets the user know that the page is currently not active.

Behavior

General behavior

Show only one confirm dialog at a time.

Confirm dialog exit

Closing a confirm dialog is possible in the following ways:

• Submit / Cancel button
  • Quit the confirm dialog by clicking a button that submits or cancels the process.
• Enter key
  • Submit and close the confirm dialog by pressing the enter key (= Primary action).
• Escape key
  • Quit the confirm dialog by pressing the escape key (= Cancel action).

Responsive behavior

• A confirm dialog has a fixed width.
• The height of a confirm dialog is determined by the length of its content.
• The footer height is fixed.
• If the viewport becomes less than the fixed width, it will use the full screen size.

Do’s & Don’ts

• Only use a confirm dialog for serious consequences.
• Do not use a confirm dialog for routine actions.

• Use a descriptive user-centric body text, which explains clearly what consequences the action will cause.
• Do not use non-descriptive body text.