Notification
Notifications provide feedback about the system status and activity.
Usage
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.
Types
There are the following notification types:
Error/Alert
Use an error/alert notification to notify the user about an action or system failure.
Warning
Use a warning notification to notify the user about a potential trouble or during an unexpected behavior of the system.
Success
Use a success notification to notify the user when an action successfully completes.
Info
Use an info notification to inform the user about useful and relevant information.
General construction
A notification consists of the following elements:
1. Severity icon
- Use the icon to emphasize the meaning of the notification.
2. Title
- All notifications have a title, which should be short and descriptive.
3. Description
- 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.
7. Background
- The background color matches the severity.
A notification
- Describes the current activity.
- Is short and precise.
- Uses the appropriate severity for the content.
Behavior
Close notification
Notifications can be actively dismissed by clicking the close button.
Placement
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.
Style
This chapter shows several notifications in the design system.
Overview
Typography
The following table gives reference to the different font sizes and weights:
Name | State | Font-family | Font-size | Line-height | Text-align |
---|---|---|---|---|---|
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: