Dialog

A dialog is a window that passes on information to a user and prompts him for a response.

Usage

When to use

Use a dialog in the following cases:

  • When you need to draw attention to an important piece of information.
  • When you need the user to input information, especially if that information is necessary to continue.
  • When you want to show additional information without losing the context of the parent page, for example showing larger images or videos.
  • When you want to show information that is not directly related to the parent page, for example “What’s new” dialog.

Types

There are the following dialog types:

Dialog with forced interaction

Use this type when an interaction is needed from the user to continue.

dialog-usage-types-forced-interaction
Dialog with forced interaction

Confirm dialog

Use this type to reduce the risk that people automatically agree to a warning without realizing the consequences. For more information see chapter Confirm dialog.

dialog-usage-types-confirm-alert
Confirm dialog

Dialog with a detail view

Use this type to display detail information about an object.

dialog-usage-types-detail-view
Dialog with a detail view

General construction

A dialog consists of the following elements:

Type: Dialog with forced interaction

dialog-usage-construction-forced-interaction
1. Header bar, 2. Descriptive title, 3. Content, 4. Footer bar with buttons, 5. Overlay, 6. Background

1. Header bar

  • The header bar contains the title.

2. Descriptive title

  • The button label which launches the dialog window should generally match with the dialog title or at least be recognizably related to it.

3. Content

  • Content of a dialog with forced interaction can be for example a form, an image or text.

4. Footer bar with buttons

  • A footer bar helps to separate the content area from the submit and cancel buttons.
  • The button labels inform the user about the action that is triggered by clicking the button.

5. Overlay

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

6. Background

  • The dialog has a drop shadow.

Type: Dialog with a detail view

dialog-usage-construction-detailview
1. Header bar, 2. Descriptive title, 3. Close button, 4. Content, 5. Overlay, 6. Background

1. Header bar

  • The header bar contains the title and the close button.

2. Descriptive title

  • The button label which launches the dialog window should generally match with the dialog title or at least be recognizably related to it.

3. Close button

  • This button closes the dialog.

4. Content

  • Content of a dialog with a detail view can be for example an image, a table, text.

5. Overlay

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

6. Background

  • The dialog has a drop shadow.

Options

Sizing

  • The dialog adapts to the size of its content.
  • There are three widths that can be used: small, medium and large.
  • The height of a dialog is determined by the length of its content. The maximum height of the container is determined by its exterior margin. If the content is longer than the length of the dialog, the user can scroll within the dialog.
  • The heights of the header bar and the optional footer bar are fixed.

dialog-usage-options-size-small
Small dialog

dialog-usage-options-size-medium
Medium dialog

dialog-usage-options-size-large
Large dialog

Frameless

Use the frameless option if the content does not require a margin, for example:

  • Image
  • Graphic elements like a map
  • Framed table, which already has a spacing

dialog-usage-options-frameless
Frameless dialog with a detail view and table as content

Behavior

Dialog exit

Closing a dialog is possible in the following ways:

  • Submit / Cancel button Quit the dialog by clicking a button that submits or cancels the process (only for dialog with forced interaction and confirm dialog).
  • Close button Quit the dialog by clicking the close button in the header bar (only for dialog with a detail view).
  • Click on overlay Quit the dialog by clicking on the overlay (only for dialog with a detail view).
  • Enter key
    • Submit and close the dialog by pressing the enter key.
    • Dialog with forced interaction / Confirm dialog = Primary action
  • Escape key
    • Quit the dialog by pressing the escape key.
    • Dialog with forced interaction / Confirm dialog = Cancel action
    • Dialog with a detail view = Close button

Scrolling

  • The amount of content determines the height of the dialog. If there is more content than is visible, the content area may be scrolled.
  • The header bar and the footer bar have a fixed position and are not scrollable.

dialog-usage-behavior-scrolling
Dialog with scroll indicator

Responsive behavior

If the viewport becomes less than the minimum width, the dialog will use the full screen size.

dialog-usage-size-mobile
Dialog on a mobile screen

Do’s & Don’ts

dialog-usage-do

dialog-usage-dont

  • Show only one dialog at the same time.
  • Don’t open multiple dialogs at the same time.

Style

This chapter shows several dialog styles in the design system.

Overview

dialog-style-overview-image-text
Dialog with forced interaction

dialog-style-overview-confirm-dialog
Confirm dialog

dialog-style-overview-frameless-image
Frameless dialog with a detail view and image as content

dialog-style-overview-frameless-table
Frameless dialog with a detail view and table as content

dialog-style-overview-small
Small dialog in screen

dialog-style-overview-medium
Medium dialog in screen

dialog-style-overview-large
Large dialog in screen

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  
Close button all Foreground color Gray 800  
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 21px 29px left

Sizing and spacing

The following measurements show the dimensions for this component:

General

  • All dialog sizes have a minimum width of 600px.
  • The height of the dialog adapts to the length of the content.
Small
  • Width: 600px
  • Maximum height: 600px
Medium
  • Width: 60% of the width of the user’s viewport
  • Maximum width: 960px
  • Maximum height: 60% of the height of the user’s viewport
Large
  • Width: 90% of the width of the user’s viewport
  • Maximum width: 1920px
  • Maximum height: 90% of the height of the user’s viewport

Dialog with forced interaction

dialog-style-sizing-forced-interaction
Sizing for dialog with forced interaction

dialog-style-spacing-forced-interaction
Spacing for dialog with forced interaction

Dialog with a detail view

dialog-style-sizing-detail-view
Sizing for dialog with a detail view

dialog-style-spacing-detail-view
Spacing for dialog with a detail view

Shadow layer

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

Position

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

dialog-style-spacing-position
Dialog position on the screen

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