Notifications

Notifications are used to communicate with end-users, and to provide real time feedback on high level and priority items requiring immediate attention.

Interactive Playground
Anatomy
Type
Behavior
Specs
Keyboard Interactions
Related Content

Interactive Playground

The Interactive Playground allows you to experiment with various notification styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

11/23/2024, 10:28 AM

Info

This is general implementation

<div
  class="neo-notification neo-notification--info"
  role="alert"
  aria-live="polite"
>
  <div
    role="img"
    class="neo-notification__icon"
    aria-label="icon"
  >
  </div>
  <div class="neo-notification__message">
    <div class="neo-notification__message__wrapper">
      <p class="neo-notification__timestamp neo-body-small neo-semibold">
        11/23/2024, 10:28 AM
      </p>
    </div>
    <div class="neo-notification__title neo-notification__text--truncated neo-notification__title--truncated">
      Info
    </div>
    <div class="neo-notification__description neo-notification__text--truncated neo-notification__description--truncated">
      This is general implementation
    </div>
    <div class="neo-notification__actions--multiline">
      <div class="neo-notification__options">
        <button
          class="neo-btn neo-btn--compact neo-btn-secondary neo-btn-secondary--info neo-notification__button"
          data-badge
        >
          Edit
        </button>
        <button
          class="neo-btn neo-btn--compact neo-btn-secondary neo-btn-secondary--info neo-notification__button"
          data-badge
        >
          Alert
        </button>
      </div>
    </div>
  </div>
  <div class="neo-notification__actions">
  </div>
</div>

<Notification
  actions={{
    actionButtons: {
      buttons: [
        {
          children: 'Edit',
          onClick: function noRefCheck() {}
        },
        {
          children: 'Alert',
          onClick: function noRefCheck() {}
        }
      ]
    }
  }}
  description="This is general implementation"
  header="Info"
  type="info"
/>

Anatomy

Here are the common components of a notification.

Image showing the different parts that make up a notification

Horizontal Color Bar:
The horizontal color bar accentuates the type of notification.
Date and Time Stamp:
Displays the time and date the notification was delivered.
Badge:
Shows the times the same message was displayed to the user.
Expand/Collapse:
Visible when additional text and content is hidden.
Dismiss:
One way to acknowledge and close the notification message.
Icon:
Represents the type of notification.
Container:
1 px border that where the stroke color matches the notification type.
Header:
Two lines of text before truncation.
Body Copy:
Two lines of text before truncation.
Timer:
Indicates the time that the notification has been on.
Action Buttons:
Allow the user to take action based on the notification. Another way to acknowledge and close the notification message.

Type

There are two variations of a notification: general and inline.

General Notifications

Notifications appear at the bottom left corner of a dashboard. As this may appear over existing content, a faint drop shadow is used to separate itself from the background elements. If multiple notifications appear at the same time, they stack on top of each other.

Inline notifications

Inline notifications are embedded into the page such as in a form. As the inline notification is part of the form, it does not need the drop shadow effect.

Behavior

Specific behaviors of a notification.

Component	Priority	User Action
Toast	Low priority	Feedback (Alert) that does not interrupt the user flow. They should be used for confirmation in response to an action. Toasts are timed to disappear automatically without user involvement.
Notification	Prominent priority	Items that require immediate attention. They can be persistent or dismissible depending on the context. Dismissible notifications remain until closed by the user, or if the state that cause the notification is resolved. (Notification inline)
Modal	Highest priority	Modals block any further use of the app until the user acknowledges the message or resolves the issue.

DO: Use notifications for priority items that need immediate attention.

Do not use notifications for frequent actions. Use a <a class='neo-link--inline' href='/components/toast'>Toast</a> instead.

DON'T: Do not use notifications for frequent actions. Use a Toast instead.

Color

Each type of notification is matched with a specific color to further enhance its meaning.

Alert

Warning

Success

Information

Event

Alert (Red):
Whenever the notification message is severe and likely caused the process to fail.
Warning (Orange):
When an operation has encountered a problem and the process may not have been completed successfully.
Success (Green):
Used to show that an operation was completed without any issues or errors.
Information (Blue):
Provides feedback on the current state of something, or about what is happening.
Event (Gray):
When the notification do not conform to one of the other types (Info, Success, Warning, Alert), use the Event type.

Use the message state that best fits the content. For example, alert for errors. Learn more in <a class='neo-link--inline' href='/guidelines/color'>color guidelines</a>.

DO: Use the message state that best fits the content. For example, alert for errors. Learn more in color guidelines.

DON'T: Do not mix the states to achieve specific colors.

Overflow

For General Notifications, by default, the text on the header and the body copy will be truncated after two lines of text.

Image showing notification with truncated text

Clicking on the chevron icon expands the notification to show the rest of the hidden content.

Image showing full text after the chevron has been activated

Dismissal

Notifications do not dismiss automatically. They persist on the page until the user dismisses them or takes action that resolves the notification.

A small “x” is used to dismiss 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.

Notification List

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.

If General Notification requires a message longer than two lines, use an actionable notification and include a short message with a “Show more” link that takes the user to a view of the full notification message. This can be either a full page with more details or a Sheet.

Stack the newest notification on top when multiple events occur quickly. If there are more than two, display the “multiple notifications” message to open the notification center.

DO: Stack the newest notification on top when multiple events occur quickly. If there are more than two, display the “multiple notifications” message to open the notification center.

DON'T: Do not hide time sensitive notifications under “multiple notifications”, such as incoming calls and calendar reminders.

Elevation

General notifications appear on top of existing content. To separate itself from the background and to stand out further, a drop shadow effect is applied to the notification using the design token Elevation-200.

DO: Use elevation when the notification appears above the page content.

DON'T: Do not use the inline style when notification appears above the page content.

Specs

Below are the specs for a notification component.

Keyboard Interactions

This section illustrates Keyboard Interactions for the Notifications Component.

Keystrokes	Interaction
Tab	Moves to the next action.
Shift + Tab	Moves to the previous action.
Enter or Spacebar	Activates an embedded action.
Esc	Closes the notification if possible. Same as a close button.