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.

Avoid using notifications in the following cases:

  • Immediate decisions should be better enforced by using a confirm dialog box.
  • Content related to a specific section of the screen, e.g. feedback regarding a form is better done using a message.

Types

There are the following notification types:

Error/Alert

Use an error/alert notification to notify the user about an action or system failure.

Error / alert

Error/Alert notification

Warning

Use a warning notification to notify the user about a potential trouble or during an unexpected behavior of the system.

Warning

Warning notification

Success

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

Success

Success notification

Info

Use an info notification to inform the user about useful and relevant information.

Info

Info notification

General construction

A 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

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

Close notification

Close notification

Placement

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

  • Use simple words.
  • Do not use only technical jargon. Always add an explanation.

Do and don't for notifications

Do and don't for notifications

  • 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 User Experience Toolkit.

Overview

Error/Alert notification

Error/Alert notification

Warning notification

Warning notification

Success notification

Success notification

Info notification

Info notification

Expanded warning notification

Expanded warning notification

Mouseover close button

Mouseover close button

Mouseover expander

Mouseover expander

Example of single notification in an app

Example of single notification in an app

Example of multiple notifications in an app

Example of multiple notifications in an app

Typography

The following table gives reference to the different font sizes and weights:

NameStateFont-familyFont-sizeLine-heightText-align
TitleallSiemens Sans Bold14px20pxleft
DescriptionallSiemens Sans Roman14px20pxleft
Expander, Optional dataallSiemens Sans Roman12px16pxleft

Sizing and spacing

The following measurements show the dimensions for this component:

Sizing for notification

Sizing for notification

Clickable areas

Clickable areas

Spacing of collapsed content

Spacing of collapsed content

Spacing of expanded content

Spacing of expanded content

Border radius

Border radius

Shadow layer

Shadow layer

Outer spacings

Outer spacings

Spacings for mobile

Spacings for mobile

To see a detailed explanation of all existing classes, please refer to the usage table below.

Example 1: Standalone preview

Example 2: Application integration

Usage

ElementClassDescription
.notification .is-error|.is-alert .is-warning .is-success .is-info Sets the appropriate severity state for a notification.
.notification .is-hidden Moves a notification out of the viewport so that other notifications can slide into view. Remove this class to re-positions the notification again in the visible part of the viewport. Remove the element from the DOM if you want to delete a notification.
.notification__details   An optional wrapper element for additional content.
.notification__details .is-expanded Add this class to expand the wrapper element. Remove the class to collapse the container again.
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top