When to use
Use notifications in the following cases:
- To interrupt the user, for a specific reason.
- To alert the user about system activities.
- To inform the user about the change in system status or any other expected event.
- To share information to the user without blocking the whole screen.
- To notify users about asynchronous events.
- To help the user to make an immediate decision, use a confirm dialog box instead.
- To show a message close to a specific section of the screen - for example when validating a form - use a message instead.
There are the following notification types:
Use an error/alert notification to notify the user about an action or system failure.
Use a warning notification to notify the user about a potential trouble or during an unexpected behavior of the system.
Use a success notification to notify the user when an action successfully completes.
Use an info notification to inform the user about useful and relevant information.
A notification consists of the following elements:
1. Severity icon
- Use the icon to emphasize the meaning of the notification.
- All notifications have a title, which should be short and descriptive.
- The description should have a maximum length of three lines.
- Make sure that the notification provides enough information to help the user understand the current or the next steps.
4. Show/Hide details expander (optional)
- Expands and collapses the additional information. It is collapsed by default.
5. Optional data
- This can be tabular data or a key-value list.
- It is recommended to display the source and timestamp. But it can also have arbitrary content.
6. Close button
- Use this button to close the notification.
- The background color matches the severity.
- Describes the current activity.
- Is short and precise.
- Uses the appropriate severity for the content.
Notifications can be actively dismissed by clicking the close button.
The notification appears on the top right corner of the screen.
Dialog and notifications
Notifications are always in front of a dialog or confirm dialog.
Do’s & Don’ts
- Use simple words.
- Do not use only technical jargon. Always add an explanation.
- Use an appropriate severity color that matches the content of the notification.
- Do not mix the color and content of the notification arbitrarily.
This chapter shows several notifications in the design system.
The following table gives reference to the different font sizes and weights:
|Title||all||Siemens Sans Bold||14px||20px||left|
|Description||all||Siemens Sans Roman||14px||20px||left|
|Expander, Optional data||all||Siemens Sans Roman||12px||16px||left|
Sizing and spacing
The following measurements show the dimensions for this component: