<h2>What&#39;s new in v3</h2>
<ul>
<li><strong>Elevation effect:</strong> Removed from the component variants. It can be adjusted natively in Figma panels.</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Use notifications when you need to inform users about something they should be aware of.</p>
<p>Use notifications when:</p>
<ul>
<li>Telling users when something worked or failed.</li>
<li>Informing users about something important they should know.</li>
<li>Showing updates about actions happening in the background.</li>
<li>Alerting users when they need to take action.</li>
</ul>
<p>Notification, modal, and message bar are not used for the same purpose. Identifying the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities, or for those using assistive technology.</p>
<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>
<p>Notification component is composed of six elements. Title and message body are required elements.</p>
<p>This component supports the use of slots. For more details about how to use slots, see the <a href="/components/notification?tab=Design#design-layout">layout</a> section. </p>
<details data-name='image-block' data-images='[{"alt":"Diagram of the different parts of the notification, marked from 1 to 6.","caption":"1. **Icon (optional):** to represent the purpose of the notification\n2. **Title:** header overview of notification\n3. **Dismiss button (optional):** a direct action to close the notification\n4. **Message body:** a brief description of the purpose of the notification\n5. **Date and time stamp (optional):** when the notification was generated\n6. **Call-to-action (optional):** optional button group to trigger actions","url":"https://dds.dell.com/site/v3/components/notification/notification-anatomy-numers.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Notifications should be timely and relevant to the user’s task, clearly indicating when a message is delivered or when action is needed. Keep notifications in chronological order, limit message text to two lines, and use short, descriptive titles to provide clear context. When action is required, include clear next steps, and avoid unnecessary or duplicate notifications to reduce alert fatigue.

## 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/v3/components/notification/notification-layout-1.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Building block

A slot is available in this component to support flexible composition. It allows users to place additional elements such as images, text blocks, or other components while preserving the component’s layout, padding, and visual consistency.

<details data-name='image-block' data-images='[{"alt":"","caption":"\nExample of the component with building block and slot.","url":"https://dds.dell.com/site/v3/components/notification/notification-layout-slots.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### 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/v3/components/notification/notification-layout-mobile.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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/v3/components/notification/notification-layout-multiple.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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.

Design

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                             | Collection | CSS var                                       | Preview    |
| -------------------------------- | ---------- | --------------------------------------------- | ---------- |
| notification/gap                 | Component  | `var(--dds-notification-gap)`                 | \-         |
| notification/padding             | Component  | `var(--dds-notification-padding)`             | \-         |
| border/radius/xs                 | Semantic   | `var(--dds-border-radius-xs)`                 | \-         |
| border/width/xs                  | Semantic   | `var(--dds-border-width-xs)`                  | \-         |
| notification/min-width           | Component  | `var(--dds-notification-min-width)`           | \-         |
| notification/max-width           | Component  | `var(--dds-notification-max-width)`           | \-         |
| color/background/SURFACE/neutral | Semantic   | `var(--dds-color-background-surface-neutral)` | \#FFFFFF   |
| color/border/NEUTRAL/pale        | Semantic   | `var(--dds-color-border-neutral-pale)`        | \#C5D4E3   |
| notification/header-gap          | Component  | `var(--dds-notification-header-gap)`          | \-         |
| spacing/sm                       | Semantic   | `var(--dds-spacing-sm)`                       | \-         |
| notification/icon/height         | Internal   | `var(--dds-notification-icon-height)`         | \-         |
| icon/size/sm                     | Component  | `var(--dds-icon-size-sm)`                     | \-         |
| color/text/primary               | Semantic   | `var(--dds-color-text-primary)`               | \#1D2C3B   |
| button/size/sm                   | Component  | `var(--dds-button-size-sm)`                   | \-         |
| button/background/ghost-rest     | Component  | `var(--dds-button-background-ghost-rest)`     | \#40586D00 |
| color/text/NEUTRAL/rest          | Semantic   | `var(--dds-color-text-neutral-rest)`          | \#1D2C3B   |
| color/text/secondary             | Semantic   | `var(--dds-color-text-secondary)`             | \#293B4D   |
| color/text/tertiary              | Semantic   | `var(--dds-color-text-tertiary)`              | \#5C6E7E   |
| button/gap/sm                    | Component  | `var(--dds-button-gap-sm)`                    | \-         |
| button/padding-horizontal/sm     | Component  | `var(--dds-button-padding-horizontal-sm)`     | \-         |
| color/border/NEUTRAL/base        | Semantic   | `var(--dds-color-border-neutral-base)`        | \#1D2C3B   |
| color/background/BRAND/base-rest | Semantic   | `var(--dds-color-background-brand-base-rest)` | \#0672CB   |
| color/text/neutral               | Semantic   | `var(--dds-color-text-neutral)`               | \#FFFFFF   |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-notification--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-notification--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-notification--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-notification--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-notification--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-notification--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

A notification shows users contextual, timely, and noncritical feedback and messages.