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.
Warning
Use a warning message to warn of a possible issue that requires attention.
Success
Use a success message to inform about successful system events or user actions.
Info
Use an info message to give neutral context information.
General construction
A message consists of the following elements:
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.
The icon can be left out to save space.
Small message
A small message consists of an optional icon and a one-line statement.
Behavior
General behavior
- A message itself is not clickable.
- Buttons or hyperlinks in the content of a message are clickable.
- Multiple messages of one severity state are displayed as one message containing a list of information.
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.
A small message can be placed in a certain context, for example in a form next to an input element.
Do’s & Don’ts
- 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
Warning
Success
Info
Sizes
The size of a message depends entirely on how much content it should convey.
Message
Small message
Further information
Messages of all types can contain hyperlinks. Portions of the content can be emphasized in bold letters.
Only regular sized messages can contain buttons or 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 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: