Skip to main content

Notification

A notification is an element used to display brief messages, alerts, or updates to users within a user interface.

Overview

The purpose of notifications is to promptly inform users about relevant information or changes that require their attention. Notifications can be used to communicate messages like new messages, system updates, completed actions, errors or reminders.

Notifications often include options for users to interact with the displayed information, such as dismissing the notification, taking action or accessing related content. They play a crucial role in keeping users informed and engaged with the application or system.

An informational notification with a single button

Dos and Don’ts

Do
  • Use the component to provide feedback on the user’s status, outcome of an action, or info on a task.
Don't
  • Use notification pinned to the top of the interface. See below for full usage guidelines between notification and toast.

Anatomy

Anatomy of a notification that contains a leading icon, title and supporting text as well as dual actions and a dismiss button.
  1. Icon (Optional): Leading icon that visually reinforces the content.
  2. Title (Optional): Provides overall content of the content.
  3. Supporting text: Provides supporting information to the user.
  4. Close (Optional): Let the user dismiss the notification.
  5. Actions (Optional): Button options let the user proceed with or dismiss the notification.

Variations

Neutral

Neutral notification provides generic messages to users that may not be related to the current action or task they’re performing. Does not require immediate action and can be dismissed on a timer or persist, depending on the content.

The neutral variant of the notification component.

Neutral alternative

Exists as an alternative option to Neutral that can be visible over grey backgrounds, with the same usage as the neutral variation.

The neutral alternative variant of the notification component.

Info

Provide additional information to users that may not be related to the current action or task they’re performing. Do not require immediate action and can be dismissed on a timer or persist, depending on the content.

The info variant of the notification component.

Success

Confirm a task was completed as expected. Typically do not require further action and can be dismissed automatically or persist in a nonintrusive manner.

The success variant of the notification component.

Warning

Inform users that they are taking actions that are not desirable or might have unexpected results. Often persist until the user dismisses the notification or continues in their task.

The warning variant of the notification component.

Error

Inform users of an error or critical failure and optionally block the user from proceeding until the issue has been resolved. Always persist until the user dismisses them or resolves error.

The error variant of the notification component.

Modifiers

Compact

The action(s) relocate to be in line with the supporting text, which helps to reduce the vertical space. The close prop is not available due to the repositioning of the actions.

The compact variant of the notification where the trailing icon, title, supporting text and actions are on the same line.
The compact variant of the notification where the trailing icon, supporting text and actions are on the same line.

Icons

Removing icons

Supporting icons can be removed for all variants if not required.

A notification component with a title, supporting text and dismiss button only

Replacing icons

When choosing an icon, ensure that is visually supports the content and message of the notification.

Do
An error notification that uses a cross icon as a trailing icon to indicate the order is canceled
Don't
An error notification that uses a microphone icon as a trailing icon to indicate the order is canceled

Title

The title can be removed where it is not necessary.

A notification with only a trailing icon, supporting text and dismiss button

Actions

Dual actions

When two separate actions are required.

A notification with a title, a trailing icon, supporting text, dismiss button and two action buttons

Single action

When a single action is required.

A notification with a title, a trailing icon, supporting text, dismiss button and one action button

No actions

When the user is not required to take action against the notification.

A notification with a title, a trailing icon, supporting text, dismiss button and no action buttons

Usage

NotificationBlock of messaging appearing either at the top or somewhere within the interface, inline with page/screen content.
ToastNon-disruptive and temporary messages, typically in the bottom centre or bottom left of the interface. Provides succinct feedback on the outcome of a user action.

Content

Notifications provide limited space for content, and therefore the content must be short and concise. A user should be able to quickly scan the notification, be apprised of the situation, and know what to do next.

Title

  • The title should be short and descriptive, explaining the most important piece of information.
  • When possible, communicate the main message using just the title.

Supporting text

  • Be concise and avoid repeating or paraphrasing the title.
  • Limit content to one or two short sentences.

Interactions

Close icon

When the user clicks the icon button, the notification is dismissed.

A notification component with a dismiss button

Actions

The actions in the notification can do things like redirecting the user. This might result in the notification closing once a task is done, or it could directly close the notification.

A notification component with a user action buttons

Narrow

All props are available in narrow screen sizes.

The notification component on narrow screens

Compact

The notification component on narrow screens and compact mode where all content is in one line to accommodate for space

Actions

Actions have the option to wrap on narrow screens due to the available horizontal space.

A notification component for narrow screens that includes a leading icon, title, supporting text, a dismiss button, and action buttons. The action buttons are stacked and span the entire available space.
A notification component for narrow screens that includes a leading icon, title, supporting text, a dismiss button, and one action button that spans the entire available space.

Position

There are two position options available for the notification component.

Inline with content

Notifications can appear anywhere inline within the content.

A screenshot of how a notification component is used among other user interfaces elements and container

Full width

Notifications can appear full width, and always appears at the top of the interface, under the header.

A screenshot of how a notification component is used as a banner under a header

Examples

LTR examples

Here are some examples of Buttons in left-to-right context:

An error notification that informs users their connect is interrupted in English representing how the component looks in a LTR context
An success notification that informs users email is confirmed in English representing how the component looks in a LTR context

RTL examples

An error notification that informs users their connect is interrupted in Hebrew representing how the component looks in a RTL context
An success notification that informs users email is confirmed in Hebrew representing how the component looks in a RTL context

Resources

Figma Component
 Stable
Figma Documentation
 Stable
Web Components
 Beta
Vue [Fozzie]
 Stable
React [Snacks]
 Stable
iOS JustUI [UI Kit]
 Stable
iOS PIE [SwiftUI]
 Stable
Android PIE [Compose & Views]
 Alpha