Skip to main contentCarbon Design System

Notifications

Notifications are an important method of communicating with users and providing feedback. They range from granular, inline responses to user actions to system-wide messages.

Overview

It’s important to keep users informed and send notifications when there is an update or status change they should be aware of. Users should always be given appropriate and timely messages to help them understand whether they are moving towards their goal. Ensure your notifications are relevant, timely, and informative.

Key principleDefinition
RelevantNotifications should be related to the user’s goals and presented in the context of what they are doing
TimelyEnsure users are kept up to date with prompt notifications and see critical notifications immediately
InformativeProvide users with the context and next steps needed to understand and address the notification

Be considerate of your users when sending a notification. Notifications that are too frequent or disruptive create negative experiences and drive users from platforms.

Notifications are comprised of status and type. Their status signifies the purpose of the information being conveyed. Notification types allow you to tailor the disruptiveness of the notification to the specific situation. Notification status and type options in Carbon should be combined to create notifications that are relevant, timely, and informative for each use case.

Notification status

  • Informational
  • Success
  • Warning
  • Error

Notification type

  • Inline
  • Toast
  • Actionable
  • Banner
  • Notification panel
  • Modal

Designing with notifications

When to use

Use notifications to inform users of important status changes and updates. Transparency is a core element of building user trust and is the first of Jakob Nielsen’s 10 usability heuristics. They should be relevant to the user and as minimally disruptive as possible. There are two major use cases for notifications: task-generated and system-generated.

Task-generated notifications

Task-generated notifications are initiated in response to user action during a specific task. They give users direct, immediate feedback. They should be placed in the region of the page the user is working in and be related to the user’s action.

You might send a task-generated notification when:

  • A form is successfully submitted
  • There is a problem uploading a file
  • Credentials can’t be found

System-generated notifications

These notifications are initiated by the application or system, independent of user action. They provide updates on background system status or out-of-context events that have finished.

You might send a system-generated notification when:

  • A user loses network connection
  • Planned system maintenance is coming soon
  • A new report is ready
  • The user’s login session is about to expire

When not to use

Only send notifications where necessary. Confine each notification to the portion of the interface and workflow it is relevant to. Being interrupted creates a frustrating and discouraging experience for users, so this should be limited as much as possible. Additionally, frequent distractions lower productivity and can lead to alert fatigue.

Notification status

Notification status helps convey the information being communicated. These statuses correspond with a color and icon to provide a consistent, universal experience for users.

Example of notification status

Notification status using the inline notification component


Deciding what to use
StatusUsageActionColorIcon
InformationalProvide additional information to users that may not be tied to their current action or taskDo not require immediate action and can be dismissed on a timer or persist, depending on the contentBlueinformation filled
SuccessConfirm a task was completed as expectedTypically do not require further action and can be dismissed automatically or persist in a nonintrusive mannerGreencheckmark filled
WarningInform users that they are taking actions that are not desirable or might have unexpected resultsOften persist until the user dismisses the notification or continues in their taskYellowwarning filled
ErrorInform users of an error or critical failure and optionally block the user from proceeding until the issue has been resolvedAlways persist until the user dismisses them or resolves errorRederror filled

Notification types

Examples of basic notification types

Deciding what to use
TypeUsageDuration and interaction
InlineProvide users with nondisruptive feedback or the status of an actionPersist until the message is resolved or dismissed by user and may include a ghost button action
ToastShort, time-based messages that slide in and out of a page and provide nondisruptive informationToast notifications without actions can disappear automatically or can be dismissed by user. Toast notifications with actions persist until dismissed by user.
ActionableActionable notifications allow for interactive elements within a notification styled like an inline or toast notificationPersist until action is taken or dismissed by user
BannerSystem or product level notifications that are not specific to a taskPersist until dismissed by user and may include a ghost button or link
Notification panelNotification center that provides users with system-generated messagesOpened and closed by user
ModalHighly disruptive notifications that provide users with critical information that needs their attention or actionPersist and block tasks until dismissed by user. Modals allow more user action than other notifications and can include other Carbon components.

Inline notification

Inline notifications are nondisruptive and confined to a specific area in the UI. Inline notifications display both task-generated and system-generated messages and persist until they are dismissed by the user or the notification is resolved. They are frequently used in conjunction with field-level messages for errors in forms or other input areas.

Carbon offers low-contrast and high-contrast inline notifications. All inline notifications use a color that corresponds with their message intent and can also be accompanied by an icon to reinforce the message intent.

Best practices:

  • Place inline notifications near their related items.
  • In forms, inline notifications can be placed either at the top or bottom.
  • Keep the message under two lines.
  • Do not cover other content with inline notifications.
  • The notification width varies based on the context and page layout.
  • Be descriptive and give users clear next steps.
Inline notification in a product

Low-contrast inline notification

Toast

Toasts are notifications that slide in and out, typically in the top right of the page. They are more disruptive than inline notifications and are best used with system-generated messages that do not correspond to a specific section of the UI.

Carbon toasts can be either low-contrast or high-contrast. Their color should correspond with the message intent and they can also use an icon to convey the message intent.

Examples of nonactionable and actionable toast notifications

Example of atoast notification without actions (left) and actionable toast notification (right)

Long messages

Removing the timestamp provides space for a third line of content for longer toast messages. Toasts are intended to be at-a-glance messages confined to a small region of the screen so their messages should not exceed three lines.

Best practices:

  • Multiple toasts stack vertically, with the newest appearing at the top of the list.
  • Keep messages clear and concise.
  • The timestamp is optional and can be removed.
  • Toast notifications have a fixed width and should not be expanded to fit the content area.
Toast notification in a product

Low-contrast toast notifications

Actionable

Actionable notifications allow for interactive elements within a notification styled like an inline or toast notification. Actionable notifications, since they require user interaction, take focus when triggered and can be highly disruptive to screen readers and keyboard users.

Actionable notifications styled as inline notifications contain only one ghost button. A small “x” in the top right corner is used to dismiss inline notifications. Including the close button is optional and should not be included if it is critical for a user to read or interact with the notification.

Actionable notifications styled as toast notifications can only contain one tertiary button. If the toast includes an action button, then the notification should remain on screen until the user dismisses it. With the notification remaining open, the user has enough time to interact with the button without the toast closing too soon.

Best practices:

  • An actionable notification should persist until user dismisses it, allowing users time to interact with the notification.
  • Only one action per notification.
  • Limit action labels to two words or less.
Actionable notification styled as a toast

Actionable notification styled as a toast notification

Banners take over the top of an interface to show general notifications for the product or system, not a specific task. They persist until they are dismissed by the user. Depending on the message, the user resolving a product or system issue (for example, updating necessary account information), may dismiss the banner. Banners may also persist across multiple