Message

A message highlights context information, recent events or gives feedback on actions.

Usage

When to use

Use a message in the following cases:

  • To display permanent information: A message is shown close to a certain piece of content.
  • To display conditional information: A message appears close to a certain piece of content. For example when validating a form.

A message transfers important information that is relevant and related to the context.

Types

There are the following message types:

Error/Alert

Use an error message for user-caused incidents and an alert message for system-caused incidents. Both are displayed the same way and indicate an actual problem.

message-usage-types-alert
Error/Alert message

Warning

Use a warning message to warn of a possible issue that requires attention.

message-usage-types-warning
Warning message

Success

Use a success message to inform about successful system events or user actions.

message-usage-types-success
Success message

Info

Use an info message to give neutral context information.

message-usage-types-info
Info message

General construction

A message consists of the following elements:

message-usage-general
1. Icon, 2. Headline, 3. Content, 4. Background

1. Icon

  • The icon is predefined according to the severity.
  • The visibility of the icon is optional.
  • The icon should match the message’s severity.

2. Headline

  • The headline summarizes the message’s content.

3. Content

  • The content gives textual information about the situation, causes and/or follow-up actions.
  • The content can contain optional hyperlinks, buttons or a list.

4. Background

  • The background color matches the severity.

Options

The following message options are available:

Message

A regular sized message contains an optional icon, a headline and content.

message-usage-types-standard-icon
Message with icon

The icon can be left out to save space.

message-usage-types-standard-without-icon
Message without icon

Small message

A small message consists of an optional icon and a one-line statement.

message-usage-types-small
Small message without and with icon

Behavior

General behavior

  • A message itself is not clickable.
  • Buttons or hyperlinks in the content of a message are clickable.

message-usage-behavior-button
Message with button

  • Multiple messages of one severity state are displayed as one message containing a list of information.

message-usage-behavior-multiple-list
Message with a list

Placement

Place a message in the main region below the content header or, if it belongs to the content of a certain tab, below the tab bar.

message-usage-behavior-placement-message
Message below the content header

A small message can be placed in a certain context, for example in a form next to an input element.

message-usage-behavior-placement-small-message
Small message in a form

Do’s & Don’ts

message-usage-do

message-usage-dont

  • Use a message only for important information.
  • Don’t use too many messages.

Style

This chapter shows several message styles in the design system.

Overview

Severity

The different severity states of a message are distinguished by color and icon.

Error/Alert

message-style-overview-alert
The most critical severity state is highlighted in red.

Warning

message-style-overview-warning
The second most critical severity state is highlighted in yellow.

Success

message-style-overview-success
Positive feedback is colored green.

Info

message-style-overview-info
Neutral information is colored blue.

Sizes

The size of a message depends entirely on how much content it should convey.

Message

message-style-overview-size-standard
1. With icon, 2. Without icon

Small message

message-style-overview-size-small
1. With icon, 2. Without icon

Further information

Messages of all types can contain hyperlinks. Portions of the content can be emphasized in bold letters.

message-style-overview-highlight
Small success message with emphasized word

message-style-overview-highlight-link
Info message with a hyperlink

Only regular sized messages can contain buttons or a list.

message-style-overview-highlight-button
Warning message with a button

message-style-overview-highlight-list
Error/Alert message with a list

Typography

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

Name State Font-family Font-size Line-height Text-align
Headline all Siemens Sans Bold 14px 20px left
Content all Siemens Sans Regular 14px 20px left
Content highlighted all Siemens Sans Bold 14px 20px left

Sizing and spacing

The following measurements show the dimensions for this component:

message-style-spacings-spacing
Sizing for: 1. Small message, 2. Message

message-style-spacings-sizing
Spacing for: 1. Small message, 2. Message

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