Notification

Notifications provide feedback about the system status and activity.

#Notification

Notifications provide feedback about the system status and activity.

Usage

When to use

Use notifications in the following cases:

  • If you have a justified reason to interrupt the user.
  • To alert the user of activities within a system.
  • To inform the user of a change in the system status or of an event that may be of interest.
  • To inform the user about something without blocking the whole screen.
  • To notify users about asynchronous events.
  • If the user has to make an immediate decision use a confirm dialog instead.
  • If you need to show a message close to a certain piece of content – for example when validating a form – use a message instead.

General construction

An notification consists of the following elements:

Notification general construction
1. Severity icon, 2. Title, 3. Description, 4. Show/Hide details expander, 5. Optional data, 6. Close button, 7. Background

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

  • We recommend the description to have a maximum length of three lines.
  • Make sure that the notification provides enough information to help the user understand what happened or needs to be done.

4. Show/Hide details expander (optional)

  • Expands and collapses additional information. It is collapsed by default.

5. Optional data

  • This can be tabular data or a key-value list.
  • We recommend to show the source and timestamp. But it can be arbitrary text content, too.

6. Close button

  • Use this button to close the notification.

7. Background

  • The background color matches the severity.

A notification

  • Describes what is happening.
  • Is short and precise.
  • Has the appropriate severity for the content.

Options

The following notification options are available:

Error / alert

Use an error / alert notification to notify users when an action failed or if a system error occured.

Error / alert
Error / alert notification

Warning

Use a warning notification to indicate potential trouble or that something is being unusual.

Warning
Warning notification

Success

Use a success notification to notify users when an action successfully completes.

Success
Success notification

Information

Use an informative notification to inform users about useful and relevant information.

Information
Information notification

Behavior

Close notification

Notifications have to be actively dismissed by clicking the close button.

Close notification
Close notification

Position

The notification appears on the top right corner of the screen.

Notification Position
Notification position in screen

Dialog and notifications

Notifications are always in front of a dialog or confirm dialog.

Dialog and notifications
Dialog and notifications z-index

Do’s & Don’ts

Express everything in simple words

Try not to use technical jargon

  • Express everything in 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

Error notification

Warning notification

Success notification

Information notification

Expanded warning notification

Mouseover close button

Mouseover expander

Example of one notification in an app.

Example of several notifications in an app.

Color

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

Name State Property Color name Modification
Notification Error / Alert Background color Context red  
Notification Error / Alert Border color Context red 200  
Icon, Title, Description, Expander, Optional data, Close button Error / Alert Foreground color Context red 500  
Notification Warning Background color Context yellow  
Notification Warning Border color Context yellow 100  
Icon, Title, Description, Expander, Optional data, Close button Warning Foreground color Context yellow 600  
Notification Success Background color Context green 050  
Notification Success Border color Context green 200  
Icon, Title, Description, Expander, Optional data, Close button Success Foreground color Context green 600  
Notification Information Background color Context blue 050  
Notification Information Border color Context blue 150  
Icon, Title, Description, Expander, Optional data, Close button Information Foreground color Context blue 600  
Expander, Close button mouseover Foreground color Cool blue  
Notification all Shadow Black 0 2px 30px 0; rgba(0,0,0,0.25)

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
Title all Siemens Sans Bold 14px 20px left
Description all Siemens Sans Regular 14px 20px left
Expander, Optional data all Siemens Sans Regular 12px 16px left

Sizing and spacing

The following measurements show the dimensions for this component:

A notification has a default width of 320px.

Sizing for notification

Clickable areas

Spacing of collapsed content

Spacing of expanded content

Border radius

Shadow layer

Outer spacings

Spacings mobile

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