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

Color

The following table gives reference to the different colors and shades used:

Name State Property Color name Modification
Title all Foreground color Gray 800  
Text all Foreground color Gray 800  
Top border, Icon alert Foreground color Functional red  
Top border, Icon warning Foreground color Functional yellow  
Top border, Icon information Foreground color Cool blue  
Top border, Icon custom Foreground color Custom color  
Overlay all Background color Gray 800 Opacity 70%
Background all Background color White  
Background all Box shadow Black 0 2px 30px 0; rgba(0,0,0,0.5)

Typography

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

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