<h2>When to use</h2>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use cases</th>
</tr>
</thead>
<tbody><tr>
<td>Message bar</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. Can be used for either critical system alerts or passive feedback.</td>
</tr>
<tr>
<td><a href="/components/notification/">Notification</a></td>
<td>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 while 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’s action is critical.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"The parts of a message bar, labeled 1 through 7.","caption":"Message bars can consist of seven primary elements. The only elements that are required are the message background and body text.\n\n1. Message background: color-coded, depending on the semantic context.\n2. Icon: optional visual representation of the semantic type of message.\n3. Body text: content that relays the intent of the message.\n4. Link: optional link to provide more context or prompt user action.\n5. Timer: optional countdown that auto-dismisses the message. It is not intended for use with messages that include actions, warnings, errors, or critical information.\n6. Dismiss icon: optional icon to close the message.\n7. Elevation: for global message bars only, **shadow-bottom/elevation-2** effect is applied.","url":"https://dds.dell.com/site/stage/d1/09/Message_Bar_Anatomy_0f942456ec.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='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Use the message bar to communicate confirmation, alerts, or critical information. 

Message bars should not rely on color alone to convey meaning (see the [section on color](/components/message-bar/?tab=Design#color) below), as color is not a universal experience. Combining text and [icons](/foundations/icons/) in each message bar can improve visual understanding.

### Feedback

Often used in task flows and [forms](/patterns/form/), message bars communicate general information and context about the current task. Examples of a feedback message include a success message after a form submission, or a message indicating there are multiple errors to fix. 

Despite the name, contextual message bars were not designed to replace inline messages or errors, but to provide additional feedback to a user after an action is completed.

<details data-name='image-block' data-images='[{"alt":"An account registration form with in-line errors and a contextual message bar showing additional information: “Complete all required fields to submit the form.” Email address and phone number fields are incomplete.","caption":"","url":"https://dds.dell.com/site/production/80/43/Message_Bar_Usage_Feedback_7557999c05.png"}]' data-numberofcolumns='1'></details>

### Status

Use a message bar, either contextually or globally, with an optional dismiss button for noncritical messages that communicate status. 

If your status can be conveyed within one or two words and no action is needed, consider using the [badge](/components/badge/) component. Action from the user is not always required, but if one is needed, it should not be time sensitive. If lines are included within the message, do not also add a timer.

<details data-name='image-block' data-images='[{"alt":"Contextual message bar within a documentation reads, “This section includes enhancements from the latest release.” Link shown: “View changelog”.","caption":"","url":"https://dds.dell.com/site/production/52/a6/Message_Bar_Usage_Status_afd12c61a5.png"}]' data-numberofcolumns='1'></details>

### System-related information

Global message bars are most often used to communicate system alerts or information that is not related to a specific element on the page, including system health, warnings, or critical alerts.

<details data-name='image-block' data-images='[{"alt":"Global message bar warning, “Database 1 is running low on storage.” Link shown: “Manage storage”.","caption":"","url":"https://dds.dell.com/site/production/95/82/Message_Bar_Usage_System_Related_Information_6ae2b135ad.png"}]' data-numberofcolumns='1'></details>

## Kinds

**Global message bars** appear at the top of the page, below the masthead, and across the width of the viewport. The page content is pushed down and there is elevation styling to provide contrast on nonwhite page backgrounds.

**Contextual message bars** display above the relevant element and push down the content. The style varies from the global type in that it doesn’t have elevation. Its behavior is static on the page and moves with the rest of the content as the user scrolls. Note that because contextual message bars are static, they are not meant to include a timer.

When there are multiple message bars, they should stack from top-to-bottom with the newest message bar appearing at the top of the stack.

### Options

Message bars contain several optional modifiers that can be combined to optimize understanding of conveyed information. For more information about timers, review the section on timed messages in the [behaviors section](/components/message-bar/?tab=Design#interaction).

<details data-name='image-block' data-images='[{"alt":"Message bar with icon and action","caption":"**With icon and action**: together can be used to provide more context or to route the user to take action.","url":"https://dds.dell.com/site/stage/9d/95/Message_Bar_Option_Icons_Action_c5f04c1018.png"},{"alt":"Message bar with icon","caption":"**With icon**: icons provide an additional visual element to clarify meaning without relying on color alone. Icons are included by default and are strongly recommended.","url":"https://dds.dell.com/site/stage/1b/ab/Message_Bar_Option_Icon_204692bdce.png"},{"alt":"Message bar with body text, “Message with icon and link.”","caption":"**Without icon or action**: minimally, text is required for all message bars.","url":"https://dds.dell.com/site/stage/30/ea/Message_Bar_Option_No_Icon_No_Action_e9a72c0eb1.png"}]' data-numberofcolumns='3'></details>

## Layout

### Alignment

There are two alignments available for the message bar component. Left alignment is the default and should be used in most instances. Center alignment is available for short messages, such as concise confirmations or feedback. If the text wraps to two lines or more, left-align the message to improve readability.

<details data-name='image-block' data-images='[{"alt":"Informational message bar with icon and body text, “Message with inline action (link)” with left-aligned text.","caption":"**Left aligned**: all content is aligned to the left except the dismiss icon.","url":"https://dds.dell.com/site/production/b6/c8/Message_Bar_Alignment_Left_8430090e0a.png"},{"alt":"Informational message bar with icon and body text, “Message with inline action (link)” with center-aligned text.","caption":"**Center aligned**: text is aligned in the center with a left-justified icon and a right-justified dismiss icon.","url":"https://dds.dell.com/site/production/4e/57/Message_Bar_Alignment_Center_e5d6dea5ea.png"}]' data-numberofcolumns='2'></details>

### Specifications

These are spacing specifications built into the component. All units of measurement are in pixels.

<details data-name='image-block' data-images='[{"alt":" Margins between stacked message bars.","caption":"Place an 8-pixel margin between stacked message bars.","url":"https://dds.dell.com/site/production/a4/66/Message_Bar_Specifications_f87aa664e3.png"}]' data-numberofcolumns='1'></details>

## Color

Message bar [colors](/foundations/color/) are limited to semantic colors. Designers should align usage to meaning. Remember that color is not a universal experience, and usage should not rely on color alone to convey meaning.

### Semantic

There are four background colors for message bars. Choose the option that best conveys the meaning of the message. 

Specific icons are reserved for use with their corresponding semantic colors. Using these icons with a conflicting semantic color is not recommended, as they each have an established, universal meaning.

<details data-name='image-block' data-images='[{"alt":"Image showing the 4 semantic colors and their corresponding icons.","caption":"\n\n| Color                 | Use case                                                                                                                              |\n| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |\n| Informative (default) | Conveys informative messages with a blue background and an optional **alert-info-cir** icon. This is the default background and icon. |\n| Success               | Provides positive or success feedback with a green background and an optional **alert-check-cir** icon.                               |\n| Warning               | Warns users that they need to take notice with a yellow background and the **alert-notice** icon.                                     |\n| Error                 | Provides negative feedback or error messaging with a red background and the **alert-error** icon.                                     |","url":"https://dds.dell.com/site/production/85/2b/Message_Bar_Color_344abc64ad.png"}]' data-numberofcolumns='1'></details>

## Interaction

### Behavior and states

Message bars are available in **dismissible**, **non-dismissible**, and **timed** options. Consider the information you’re trying to communicate to the user when selecting between a dismissible or non-dismissible message bar. 

For example, global message bars containing critical information should remain in view and therefore be non-dismissible by the user.

<details data-name='image-block' data-images='[{"alt":"Image showing the three behaviors for message bars.","caption":"","url":"https://dds.dell.com/site/production/e8/c2/Message_Bar_Behaviors_f1e33a4b05.png"}]' data-numberofcolumns='1'></details>

#### Timed

Use a timed message bar to automatically dismiss nonessential information or feedback after completing an action. Timed message bars should not contain long messages or actions that users might miss or overlook as the countdown expires. 

If more than one message bar includes a timer, each timed message bar should countdown in chronological order only after the previous timer expires and its message is dismissed. Ensure users can access messages in a notifications center or somewhere similar once the messages disappear from view.

Hovering over the message should pause the timer to give the user more time to read the message. If they hover over the dismiss icon, the timer resumes.

The timer functionality is only available for global message bars for two main reasons:

* Users may not notice the message before it times out.
* Contextual message bars can shift the position of elements in the interface when they disappear.

Together, these two things can lead to confusion or even misclicks as the message may time out while it is not in view.

<details data-name='image-block' data-images='[{"alt":"Image showing the user pausing the timer by hovering or focusing the message bar.","caption":"The timer appears as a circle animation on the message bar and auto-dismisses once the circle is diminished.","url":"https://dds.dell.com/site/stage/dc/c6/Message_Bar_Behaviors_Timed_6a9bbba708.png"}]' data-numberofcolumns='1'></details>

## Standards

### Accessibility

#### A message bar’s meaning should not be communicated by color alone

Support the meaning of a message bar with appropriate text or an icon. This helps users who cannot see color, or who are using assistive technology. Any body text must provide an indication of the status conveyed by the message bar regardless of the color used. 

If using an accompanying icon, its meaning must be visually self-evident and commonly used in that context, such as an error alert, check, or warning icon.

WCAG 2.2: [1.4.1 Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)

#### Ensure each message bar meets the appropriate level of contrast

Both the body text and icon must meet a contrast ratio of 4.5:1 with the message bar background. The message bar component should achieve a 3:1 contrast ratio or greater with the page background.

WCAG 2.2: [1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)Do not use timed notifications for anything critical or destructive

Make sure that a user who were to ignore or miss a timed notification due to its timed display would encounter no negative impact on their current activities or the status that the message conveyed.

#### Whenever possible, give users settings to change the frequency of or turn off non-essential notifications

Non-urgent 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 separate non-disruptive area of the screen.

WCAG 2.2: [2.2.1 Timing Adjustable](https://www.w3.org/WAI/WCAG22/Understanding/timing-adjustable.html), [2.2.4 Interruptions](https://www.w3.org/WAI/WCAG22/Understanding/interruptions.html)

#### [](https://www.w3.org/WAI/WCAG22/Understanding/interruptions.html)Links and titles on message bars should accurately describe the meaning and purpose of the notification

All titles in the message bar notification and links, if included, should contain meaningful and descriptive link text. Avoid generic phrases like “Learn more” in favor of more descriptive and unique text, such as “Learn how to change your settings.”

WCAG 2.2: [2.4.4 Link Purpose in Context](https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html), [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)Make sure that dynamic message bar notifications are announced by screen readers

Notifications that appear dynamically (either as a result of a user interaction or another trigger) should be announced by screen readers.

WCAG 2.2: [4.1.3 Status Messages](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html)

### Content

#### Capitalization

Use sentence case within a message bar unless referring to proper nouns. Otherwise, do not use title case and never use all caps.

**Do**: Your ticket was submitted.\
**Don’t**: YOUR TICKET WAS SUBMITTED.

#### Past tense

Use past tense to describe the status of an action that is completed.

**Do**: Image uploaded.\
**Don’t**: Image uploading complete.

#### Message text

Because message bars convey important information and can include an inline link or action, keep the message text as concise as possible. Offer additional information or route users to action if necessary.

#### Punctuation

Include punctuation in message bars. If a link comes at the end of a sentence or before a comma, don’t link the punctuation mark. Review [accessibility guidelines on links](/components/link/?tab=Design#standards) for best practice information.

#### Timers

Do not pair timers with warnings, errors, or messages that contain actions. Timers are intended for text-only message bars.

Design

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

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-message-bar--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-message-bar--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-message-bar--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-message-bar--basic)

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

Message bars are nonmodal semantic dialogs that can be displayed at the top of the page or contextually within a task flow.

Message Bar

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
