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.

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.

Types

There are the following message types:

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

Severity

Depending on the type and urgency of the information a message owns a severity state.

As states there are:

  • Error (for user-caused incidents) and alert (for system-caused incidents). Both are displayed the same way and indicate an actual problem.
  • Warning: Warns of a possible issue that requires attention.
  • Success: Informs about successful system events or user actions.
  • Information: Gives neutral context information.

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

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

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

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 MindSphere 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.

Information

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
Information 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

Color

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

Name State Property Color name
Message Error / Alert Background color Context red
Message Error / Alert Border color Context red 200
Headline, Content, Icon Error / Alert Foreground color Context red 500
Message Warning Background color Context yellow
Message Warning Border color Context yellow 100
Headline, Content, Icon Warning Foreground color Context yellow 600
Message Success Background color Context green 050
Message Success Border color Context green 200
Headline, Content, Icon Success Foreground color Context green 600
Message Information Background color Context blue 050
Message Information Border color Context blue 150
Headline, Content, Icon Information Foreground color Context blue 600

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
Headline all Siemens Sans Bold 14px 20px left
Content all Siemens Sans Roman 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