Overview
Notifications are part of the Tool Header and are displayed in a popover. They are used to display information from the system that is not available on the current screen.
Legacy Guideline Available
This guideline pertains to the most recent version of the SAP Design System. Previous iterations of this guideline remain applicable for tools that have not yet adopted the latest design vision.
Legacy Guidelines:
When to use
Recommended
- Use notifications to display system messages.
- Use relative timestamp.
- Clicking on the notification should forward the user to the target application or page.
- Group notifications by date, ex.: Today, Yesterday, This week...etc.
- Load only the most recent notifications, and show the older ones on request.
- When possible use the native browser / OS notification center for push notifications.
Not Recommended
- Avoid using notifications to display form validation messages.
- Avoid too long and descriptive titles.
- Avoid placing links in the notification.
- Avoid loading all notifications in the popover.
Anatomy
Notifications are displayed in a scrollable popover. The popover can be triggered from a dedicated button in the Tool Header.
Notification title (Mandatory)
The Notification title is a mandatory part of the notification item. The text should be short, clear, and easy to understand because it gets truncated after the second line.
Description
The description is an optional part of the notification but is highly recommended to be used to give the end user more information. The length of the description is limited and after the second line the text truncates.
Avatar (Mandatory)
The avatar is not only a decoration but also helps to distinguish notifications from different sources. The avatar can display a person's photo or user initials, application, or service icon. If none of them is applicable or does not exist, a generic icon for the user or application should be used.
Timestamp (Mandatory)
Use a relative timestamp whenever possible and the system allows it. Relative timestamp gives a better understanding to the end user when the notification was created. The absolute timestamp should be used for notifications that are older than a month.
Grouping
The default order of the items in the notification list is by date. Different groupings, ex.: By Source are possible if the application requires it. Within the group, the order of the notifications remains "by date"
Interaction
Expand / Collapse
Grouping in the Notification popover is handled by an expandable and collapsible group. Interaction with the group happens by clicking or tapping on the group name.
The expanded group has an arrow indicator that helps to distinguish the collapsed groups from the expanded ones.
Scrolling behavior
The group header stays on top of the list and the notification list scrolls beneath until the next group title come to place.
Resources
Design
Notifications - Visual Design Specification
See also
Leave Feedback
We want to make our toolkit better. If you're interested in providing feedback, please use the commenting feature in the Figma file link in the button below.