Intro

Notifications serve as real-time alerts, providing users with information about significant events, updates, or changes in business processes, workflows, or data. Notifications ensure users remain informed and can take timely action or make decisions without disrupting ongoing tasks.

Notifications are temporary, one-way messages triggered by an event. Users can read, act on, dismiss, or simply ignore them; engagement is optional. Once sent, the notification content remains and cannot be changed or retracted, so notifications might become outdated.

Users can access notifications by clicking the bell icon :icon-bellin the top-right corner of the screen.

Open notifications panel

When to Use

Notifications should be well-instrumented to provide value to users. Using notifications effectively involves timing them to provide value without being intrusive. An excessive number of notifications can frustrate users, diminishing their effectiveness. Notifications should be brief and concise, conveying specific information or prompting an action.

In a nutshell, a notification should be:

• Clear on its purpose (e.g., update, reminder, or alert)
• Concise and to the point
• Relevant and useful for the user
• Well-timed
• Personalized, where possible
• Action-oriented, with a clear call to action
• Transparent on importance (ensure that you use the importance indicator consistently across your product)
• Well-paced (avoid overwhelming users with too many messages in a short time span)

Notification Scenarios

Here are some scenarios where using notifications can be beneficial:

• Reminders:
  For upcoming events, appointments, deadlines, payments, or tasks that require the user's attention or action.
• Alerts:
  For urgent information, such as business critical alerts.
• Updates:
  Significant changes to something the user is interested in, such as status updates or workflow progress.

Anatomy – Notification Panel

Anatomy – Notification List Item

Behavior and Interaction

Scrolling

The notification group titles remain fixed at the top of the scroll container as you scroll. When you reach the next group, the title at the top of the container changes to the title of this group.

Notification panel – scrolling

Clear All

The Clear All button removes all notifications that are currently in the panel. The user is prompted to confirm the action.

Notification panel – ‘Clear All’ button

Sorting

The notification panel offers two sort options:

• By Date (default): Newest to oldest
• By Importance: Notifications with importance indicators are grouped in an “Important” group. This group is displayed at the top of the panel and sorted by newest to oldest. The remaining notifications are grouped under “Other” below the “Important” group. They are sorted by creation date in descending order.

Notification panel – sorting by date or importance

Expand / Collapse Notification Group

Users can expand and collapse notification groups using the chevron to the left of the notification group title.

Expanded and collapsed notification groups

Unread / Read

The title of the notification item is bold, indicating that it hasn't been clicked. When the user clicks the notification, the title's font weight changes from bold to normal.

Unread and read notification items

Unsubscribe Action

The overflow button :icon-overflowallows the user to access the Unsubscribe option for this specific notification type. We do not recommend adding further actions.

'Unsubscribe’ action for a notification item

Delete

Clicking Delete :icon-decline1removes the notification item.

More / Less

The title and description for a notification item are each limited to two lines. Longer texts are truncated. To view the full text, the user can click More. Clicking Less shows the truncated text again.

'More’ and ‘Less’ buttons for a notification item

Banner Fly-In

Users can set certain notifications to fly in from the right as banners while using the product. These notifications appear for five seconds before sliding away. Users can interact with them if necessary. Clicking the Dismiss button :icon-decline1removes the notification, but it remains listed in the notification panel.

Banner fly-in

Bell Interaction

The counter above the bell icon :icon-bellshows the number of new notifications received since the user last opened the notification panel. Clicking the bell icon resets the counter to zero and the badge is hidden.

Desktop: If the notification count is 1000 or more, the counter shows +999.

Mobile: If the notification count is 100 or more, the counter shows +99.

Bell interaction

Responsiveness

The notification panel is fully responsive.

Content

To ensure clear and actionable notifications across products, follow the standard conventions for message structure, tone, terminology, and information placement.

For more information, see UX Writing for Notifications.

Related Links