<h2>When to use</h2>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use cases</th>
</tr>
</thead>
<tbody><tr>
<td>Notification</td>
<td>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.</td>
</tr>
<tr>
<td><a href="/components/modal/">Modal</a></td>
<td>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&#39;s action is critical.</td>
</tr>
<tr>
<td><a href="/components/message-bar/">Message bar</a></td>
<td>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.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"Diagram of the different parts of the notification, marked from 1 to 6.","caption":"There are six elements of a notification. The icon, dismiss function, date and time stamp, and call-to-action footer are optional.\n\n1. Icon: to represent the purpose of the notification\n2. Title: header overview of notification\n3. Dismiss icon:  a direct action to close the notification\n4. Message body: a brief description of the purpose of the notification\n5. Date and time stamp:  when the notification was generated\n6. Call-to-action: optional button group","url":"https://dds.dell.com/site/stage/d9/c3/Notification_Anatomy_9dd83fd65b.png"}]' data-numberofcolumns='1'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/indicators-validations-notifications/","type":"External"},"title":"Indicators, validations, and notifications","description":"Read the Nielsen Norman Group&#39;s article on notifications.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='3' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Notifications should be timely and related to the user's task, informing them of when the message was delivered or when an action needs to occur by.


* Notifications should appear in chronological order. 
* 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.
* If there is an action, give users the next steps to address the notification. 
* Limit sending unnecessary notifications to prevent alert fatigue. 
* Avoid sending duplicate notifications, even if the user hasn't interacted or dismissed the original message. 



## Layout

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

<details data-name='image-block' data-images='[{"alt":"Mockup of a generic page, showing how notifications appear at the bottom right of the screen.","caption":"","url":"https://dds.dell.com/site/stage/88/4e/Notification_Behavior_Positioning_626e9c866a.png"}]' data-numberofcolumns='1'></details>

### 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.

<details data-name='image-block' data-images='[{"alt":"Mockup of a generic screen showing how notifications appear centered at the bottom of the screen.","caption":"","url":"https://dds.dell.com/site/stage/b7/af/Notification_Behavior_Positioning_Mobile_1874d26b21.png"}]' data-numberofcolumns='1'></details>

### Multiple notifications

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

<details data-name='image-block' data-images='[{"alt":"Mockup of a generic page showing how notifications appear stacked chronologically.","caption":"","url":"https://dds.dell.com/site/stage/2a/98/Notification_Behavior_Positioning_Multiple_Notification_8515dfbd7a.png"}]' data-numberofcolumns='1'></details>

### Button grouping

Refer to guidance on [button specifications](/components/button/?tab=Design#layout) to know the correct steps when grouping buttons.

## 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.2: [2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html)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.2 (AAA, optional): [2.2.3 No Timing ](https://www.w3.org/WAI/WCAG22/Understanding/no-timing.html)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/no-timing.html)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.2 (AAA, optional): [2.2.4 Interruptions ](https://www.w3.org/WAI/WCAG22/Understanding/interruptions.html)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/interruptions.html)Avoid using icons alone to convey meaning

[Icons](/foundations/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

Design

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-notification--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-notification--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-notification--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-notification--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-notification--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-notification--docs&viewMode=docs&websiteFrame=true'></details>

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

Notification

React update

<p>The DDS React library now contains all components available in the Angular and Vanilla component libraries.</p>
