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.


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.


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.

Alert confirm dialog

Warning confirm dialog

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

Warning confirm dialog

Information confirm dialog

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

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.

Custom confirm dialog

General construction

A confirm dialog consists of the following elements:

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.


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 on a mobile screen

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.


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


Alert confirm dialog

Warning confirm dialog

Information confirm dialog

Custom confirm dialog

In-app example


Please note that the font size and line height of the confirm dialogs’ content is influenced by the font size that is set ‘globally’ in your web application and might differ from the screens.

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 Roman 21px 29px left
Text all Siemens Sans Roman Pagragraph font-size Paragraph line-height left

Sizing and spacing

The following measurements show the dimensions for this component:


A confirm dialog has a fixed width of 600px.

Sizing for confirm dialog

Spacing for confirm dialog

Shadow layer

Spacing for the shadow layer


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

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