Notification

A notification is nonmodal dialog. It shows users contextual, timely, and noncritical feedback and messages.

Status

Figma UI Kit	PublishedElement can be used in production
Vanilla	PublishedElement can be used in production
Angular	In backlogElement is in backlog
React	In backlogElement is in backlog
Documentation	PublishedElement can be used in production

What's new

Notifications have been redesigned to include call-to-action buttons and a date and time stamp.

When to use

Component	Use cases
Notification	A notification is a nonmodal, passive dialog that keeps users informed without blocking access to the base page. The user can continue with the experience, regardless if the notification is still on screen. Use for interactions that aren’t critical.
Modal	Modals display important information that users need to acknowledge before moving ahead. They appear over the interface and block further interactions on the base page until an action is completed. Use in cases where a user’s action is critical.
Message bar	Global message bars display nonmodal messages that inform users of updates or changes to system status. Contextual message bars are most often used in task flows and forms, providing users additional context or information about a task. Either can be used for critical system alerts or passive feedback.

Anatomy

Diagram of the different parts of the notification, marked from 1 to 6. — There are six elements of a notification. The icon, dismiss function, date and time stamp, and call-to-action footer are optional.

Icon: to represent the purpose of the notification

Title: header overview of notification

Dismiss icon: a direct action to close the notification

Message body: a brief description of the purpose of the notification

Date and time stamp: when the notification was generated

Call-to-action: optional button group

Feedback

Usage

Message body length should be concise and not exceed more than two lines.
Titles should be descriptive, containing two to three words to explain the context of the message.
Notifications should be related to the user’s task.
This type of feedback should be timely and inform users when the message was delivered or by when an action needs to occur.
If there is an action, give users the next steps to address the notification.
Limit sending notifications that aren’t necessary to prevent alert fatigue.
Avoid sending duplicate notifications, even if the user hasn’t interacted or dismissed the original message.
Notifications should appear in chronological order.

Layout

For all grid sizes except XS (extra small), notifications are positioned at the bottom-right of the page to help minimize user distraction.

Mockup of a generic page, showing how notifications appear at the bottom right of the screen.

Elevation

Grid size	Elevation
XS (extra small) grid breakpoints 432 pixels and below	Elevation level 2, shadow-left
S (small) to 5XL (extra large) grid breakpoints above 432 pixels	Elevation level 2, shadow-bottom

Mobile breakpoint positioning

For viewport ranges 320 to 479 pixels (XS grids), notifications appear centered and at the bottom of the screen.

Mockup of a generic screen showing how notifications appear centered at the bottom of the screen.

Multiple notifications

Multiple notifications are stacked on top of each other and appear chronologically, with the newest at the top.

Mockup of a generic page showing how notifications appear stacked chronologically.

Button grouping

Refer to guidance on button specifications

Standards

Accessibility

Notification titles must accurately describe the meaning and purpose of the notification
The purpose of the notification should be clearly understood by reading the title alone.
WCAG 2.1: 2.4.6 Headings and Labels

Avoid timed notifications
Those using assistive technology or who have cognitive difficulties may miss or find it hard to react to a timed message before it disappears.
WCAG 2.1 (AAA, optional): 2.2.3 No Timing

Provide users with settings to turn off nonessential notifications or change the frequency
Nonurgent notifications can be distracting for people with cognitive disabilities and can be hard to see for those with partial or low vision, since notifications typically display on a nondisruptive area of the screen.
WCAG 2.1 (AAA, optional): 2.2.4 Interruptions

Avoid using icons alone to convey meaning
Icons should be used to reinforce the meaning, not explain it.

Make sure icons are universally recognizable
If there is any doubt about the meaning of an icon, make sure heading text accurately describes the purpose of the message along with the icon.

Content

Formatting dates
Avoid using slashes in dates.
Do: May 04, 2021
Don’t: 05/04/2021

Formatting time
Use a 12-hour clock, not a 24-hour clock.
Use numerals to indicate time, except for noon and midnight.
Use the abbreviations a.m. and p.m.—lowercase, with periods. Include a space between the numeral and the abbreviation.
Do: 2:00 p.m.
Don’t: 2:00pm
Don’t: 14:00

Live demo

This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.

You are now entering a live demo of the component.

const data = {
  titleIcon: "",
  closeIcon: true,
  title: "Dell Reward Center",
  messageBody: "Are you sure you want to leave this page?",
  timeStamp: "Today, 1:05 p.m.",
  primaryActionText: "Cancel",
  secondaryActionText: "Go to Dell.com",
  notificationCount: 1,
  titleIconType: "font-icon",
};

DDS.Notification(data);

Copy code

View the notification demo and code in Vanilla.

Visit Storybook

Notification

Status

Contents

What's new

When to use

Anatomy

Feedback

Contents

Contents

Usage

Layout

Elevation

Mobile breakpoint positioning

Multiple notifications

Button grouping

Standards

Accessibility

Content

Contents

Contents

Live demo

You are now entering a live demo of the component.

Vanilla

Contents

Notification

Status

Contents

What's newCopy link to this section

When to useCopy link to this section

AnatomyCopy link to this section

Feedback

Contents

What's new

When to use

Anatomy