Notifications

Notifications alert users to important messages triggered by their actions or system events.

Overview

Use notifications sparingly as they are meant to be disruptive. Notifications come in various forms to suit your product’s needs:

  • Notifications can appear inline with other content or as toasts, which are non-modal overlay elements that disappear after four seconds. Wrap toasts using notification streams to control positioning and styling.
  • Notifications can be either dismissible or non-dismissible.
  • There are four notification/toast styles: success, alert (error), info, and warning.

For guidance on how and when to use these variants, refer to the Design and Layout section below.

Design and Layout

Style Variations

Each notification/toast style uses a distinct background color, icon, and label to clearly communicate its purpose.

STATEUSAGEEXAMPLE
Information Use information styling for non-critical updates, like reminders about filing deadlines.
Success Use success styling when a user has completed an important action or task.
Warning Use warning styling for potential issues that may have negative, undesirable, or unusual outcomes.
Alert (Error) Use alert (error) styling for system failures or critical issues that need to be resolved. Use with inline error messages.

Notifications vs. Toasts

Notifications and toasts alert users to system status and validation messages, but the context determines which is more appropriate. Whenever possible, allow users to access toasts or dismissible notifications after they disappear.

Notifications
  • Use notifications for important updates or urgent issues requiring user action.
  • Place notifications at the top of a page as banners or inline with relevant content, aligned to the left and matching the width of the main content.
  • Notifications can be dismissible or non-dismissible.
  • Limit notifications to a maximum of three per page and avoid using alert and success notifications on the same page.
  • Examples:
    • Filing deadline reminders
    • Major system failures or anomalies
    • Confirming the status of a form submission
    • Error messages (used with inline input notifications)
Toasts
  • Use toasts for low-priority system messages, keeping them to one sentence.
  • Wrap toasts in a notification stream and place them in the top right corner of the page. For actions taken on records in a data table, position toasts in the top center of the table.
  • Toasts should always be dismissible.
  • Examples:
    • Confirming that a message has been deleted or archived
    • Confirming an action taken on a record in a data table

Dos and Don'ts

Do
  • Do use clear, concise language. If user action is required, explain what steps the user should take to resolve an issue or prevent it from occurring.
  • Do use alert notifications with inline error messages if there are validation errors.
  • Do use the default style variants to ensure consistency and color contrast accessibility.
Don't
  • Don't overuse notifications. Limit notifications to a maximum of three per page and avoid displaying success and alert notifications at the same time.
  • Don't use notifications for information that should be permanently displayed, such as instructions.

Installation

Notifications

Toast Notification Stream

Props

Events