Search/

Notifications

Last modified:

Notifications effectively communicate with users about important information and system updates. This section details their usage and behavior to ensure a consistent and informative user experience.

Overview

Last modified:

Clear notifications are essential for a user-friendly experience, especially when updates occur. Visibility of system status creates trust and forms one of the 10 Usability Heuristics for User Interface Design by Nielson Norman Group.

We have two major use cases for notifications:

  1. Task-generated – These notifications are triggered in response to a user action during a task. For example, submitting a form, uploading a file that is too large, or deleting an item.
  2. System-generated – These notifications happen automatically by the system, and generally without needing input from the user. For example, system outage, user session is about to expire, or planned maintenance.

Notification styles

Last modified:

Collection of different notification styles

StyleUsageBehaviorAppearance
InformationalUse for neutral updates that keep users informedDoes not require actionBlue with info icon
SuccessUse for positive confirmations when an action completes successfullyThis typically doesn’t require user actionGreen with checkmark icon
WarningUse to alert users of potential issues that require their attention, but aren’t critical errorsPersists until the users continues their task, but doesn’t normally require actionYellow with alert icon
ErrorUse for critical errors that indicate a serious problemAlways persists until the user resolves the errorRed with stop icon

Notification types

Last modified:

PriorityComponentUsageDuration and interaction
LowPage alertPage-level feedback to inform the status of something. Normally used for form errors. Read about managing form errors.Persists on the page until it is resolved by the user.
ModerateToastTemporary, non-disruptive short messages that slide in from the bottom of the pageAutomatically disappears after a short time
HighBannerPlatform-level messages about the system or status of somethingPersists until resolved or dismissed by the user or system
CriticalConfirmation modalHighly disruptive notification that requires immediate attention and actionPrevents task progression and always persists until the user acknowledges and provides input

Deciding what to use

Last modified:

Use the following decision flow chart to help you decide which component is best suited for your use case.

Yes

No

Yes

No

Yes

No

Yes

No

Is the notification related to a user-initiated action that requires explicit acknowledgment?

Is the notification a high-priority warning, error, or critical notification that needs to persist across all pages?

Is the notification related to a form submission or a non-critical error?

Is the notification a non-critical, temporary, informational message or system feedback that does not require immediate user action?

Reevaluate the notification necessity or consider alternative communication methods