Confirm dialog

A confirm dialog asks a user to verify whether they want to proceed or cancel a requested action. The confirm dialog must be attended before the system executes the command.

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.

confirm-dialog-usage-types-alert
Alert confirm dialog

Warning confirm dialog

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

confirm-dialog-usage-types-warning
Warning confirm dialog

Information confirm dialog

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

confirm-dialog-usage-types-information
Information confirm dialog

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.

confirm-dialog-usage-types-custom
Custom confirm dialog

General construction

A confirm dialog consists of the following elements:

confirm-dialog-usage-construction
1. Title, 2. Text, 3. Footer bar with buttons, 4. Icon, 5. Top border, 6. Background, 7. Overlay

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

confirm-dialog-usage-behavior-mobile
Confirm dialog on a mobile screen

Do’s & Don’ts

confirm-dialog-usage-do-routine

confirm-dialog-usage-dont-routine

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

confirm-dialog-usage-do-descriptive

confirm-dialog-usage-dont-descriptive

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

Style

This chapter shows several confirm dialog styles in the design system.

Overview

confirm-dialog-style-overview-alert
Alert confirm dialog

confirm-dialog-style-overview-warning
Warning confirm dialog

confirm-dialog-style-overview-information
Information confirm dialog

confirm-dialog-style-overview-custom
Custom confirm dialog

confirm-dialog-style-overview-example1
In-app example

Typography

The following table gives reference to the different font sizes and weights:

Name State Font-family Font-size Line-height Text-align
Title all Siemens Sans Regular 21px 29px left
Text all Siemens Sans Regular 14px 20px left

Sizing and spacing

The following measurements show the dimensions for this component:

General

A confirm dialog has a fixed width of 600px.

confirm-dialog-style-sizing
Sizing for confirm dialog

confirm-dialog-style-spacing
Spacing for confirm dialog

Shadow layer

confirm-dialog-style-spacing-shadow
Spacing for the shadow layer

Position

The confirm dialog is positioned in the center of the screen, that means it is vertically and horizontally centered.

confirm-dialog-style-spacing-position
Confirm dialog position on the screen

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top