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

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:

NameStateFont-familyFont-sizeLine-heightText-align
TitleallSiemens Sans Roman21px29pxleft
TextallSiemens Sans RomanPagragraph font-sizeParagraph line-heightleft

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

To see a detailed explanation of all existing classes, please refer to the usage table below.

Warning confirm dialog

<div class="dialog is-shown dialog--confirm">
    <div class="dialog__overlay"></div>
    <div class="dialog__container">
        <div class="dialog__background">
            <section class="dialog__content">
                <h1 class="confirm__headline">Lorem ipsum</h1>
                <p>
                    Quisque tincidunt sodales pretium. Nulla consectetur purus mi, id ultrices nibh mollis sed. Nunc hendrerit massa cursus, vulputate ligula nec, mollis ante. Sed diam purus, auctor nec nulla at, luctus vulputate dui.
                </p>
            </section>
            <footer class="dialog__footer">
                <a class="button button--secondary" href="#">Secondary action</a>
                <a class="button button--primary" href="#">Primary action</a>
            </footer>
        </div>
    </div>
</div>

Alert confirm dialog

<div class="dialog is-shown dialog--confirm confirm--alert">
    <div class="dialog__overlay"></div>
    <div class="dialog__container">
        <div class="dialog__background">
            <section class="dialog__content">
                <h1 class="confirm__headline">Lorem ipsum</h1>
                <p>
                    Quisque tincidunt sodales pretium. Nulla consectetur purus mi, id ultrices nibh mollis sed. Nunc hendrerit massa cursus, vulputate ligula nec, mollis ante. Sed diam purus, auctor nec nulla at, luctus vulputate dui.
                </p>
            </section>
            <footer class="dialog__footer">
                <a class="button button--secondary" href="#">Secondary action</a>
                <a class="button button--primary" href="#">Primary action</a>
            </footer>
        </div>
    </div>
</div>

Information confirm dialog

<div class="dialog is-shown dialog--confirm confirm--info">
    <div class="dialog__overlay"></div>
    <div class="dialog__container">
        <div class="dialog__background">
            <section class="dialog__content">
                <h1 class="confirm__headline">Lorem ipsum</h1>
                <p>
                    Quisque tincidunt sodales pretium. Nulla consectetur purus mi, id ultrices nibh mollis sed. Nunc hendrerit massa cursus, vulputate ligula nec, mollis ante. Sed diam purus, auctor nec nulla at, luctus vulputate dui.
                </p>
            </section>
            <footer class="dialog__footer">
                <a class="button button--secondary" href="#">Secondary action</a>
                <a class="button button--primary" href="#">Primary action</a>
            </footer>
        </div>
    </div>
</div>

Custom confirm dialog

<div class="dialog is-shown dialog--confirm confirm--custom">
    <div class="dialog__overlay"></div>
    <div class="dialog__container">
        <div class="dialog__background has-borderColor-forced-accentTealDark">
            <section class="confirm__icon">
                <i aria-hidden="true" class="iconMdsp assetNetwork filled has-color-forced-accentTealDark"></i>
            </section>
            <section class="dialog__content">
                <h1 class="confirm__headline">Lorem ipsum</h1>
                <p>
                    Quisque tincidunt sodales pretium. Nulla consectetur purus mi, id ultrices nibh mollis sed. Nunc hendrerit massa cursus, vulputate ligula nec, mollis ante. Sed diam purus, auctor nec nulla at, luctus vulputate dui.
                </p>
            </section>
            <footer class="dialog__footer">
                <a class="button button--secondary" href="#">Secondary action</a>
                <a class="button button--primary" href="#">Primary action</a>
            </footer>
        </div>
    </div>
</div>

Usage

ElementClassDescription
.dialog.dialog--confirm .is-shown Displays the standard warning confirm dialog.
.dialog.dialog--confirm .confirm--alert Applies the styling for an alert confirm dialog.
.dialog.dialog--confirm .confirm--info Applies the styling for a info confirm dialog.
.dialog.dialog--confirm .confirm--custom Enables a developer to use a customizeable dialog style with any available top border color and system icon in any available color:
  • Add an available .has-borderColor-forced-<color name> class to the html element with class .dialog__background to apply the required top border color.
  • Add following additional code snippet as first child to the html element .dialog__background:
    <section class="confirm__icon"><i class="iconMdsp assetNetwork has-color-forced-accentTealDark"></i></section>
  • Add an available .has-color-forced-<color name> class to the html element .iconMdsp to apply the required color to the desired icon.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top