<h2>What’s new in v3</h2>
<ul>
<li><strong>Timer:</strong> More visible and clear. Works like a progress bar from 0% to 100% and dismisses the message when full. Applies only to non‑critical short messages (info and success) and message bars without actions.</li>
<li><strong>Kinds:</strong> Token usage simplified for consistency. Icons now use a single token (color/icon/secondary). Text uses consistent tokens (color/text/primary and secondary). </li>
<li><strong>Dismiss button:</strong> Available only for non‑critical messages (info and success).</li>
<li><strong>Icons:</strong> No longer dismissible. Icons are filled to improve readability and visibility.</li>
<li><strong>Semantic title:</strong> Added to provide clear hierarchy and improve accessibility.</li>
<li><strong>Text alignment:</strong> Simplified to left alignment for consistency and accessibility. Center alignment remains available when text orientation changes.</li>
<li><strong>Action button:</strong> Now a tertiary button aligned to the top‑right for better consistency, visibility, and accessibility.</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>Message bars display timely information to users, such as warnings, confirmations, or important updates. They help ensure users don’t miss critical context while completing a task.</p>
<p>Use the message bar when:</p>
<ul>
<li>Communicating essential information that affects the user’s current workflow.</li>
<li>Providing feedback after an action, such as success, error, or status updates.</li>
<li>Highlighting warnings or blocking issues that require user attention.</li>
</ul>
<p>Message bar, notification, and modal deliver important information, but they serve different purposes. Choose the component that best aligns with the urgency and interaction required.</p>
<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>
<p>Message bar consists of seven elements. </p>
<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.\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/v3/components/message-bar/messsage-bar-anatomy.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='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></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/v3/components/message-bar/message-bar-usage-feedback.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Status

Use a message bar to communicate noncritical status either **contextually** or **globally**. If the status can be stated in one or two words and no action is expected, use a [badge](/components/badge/) component.

Include a dismiss option for informational messages that do not require action. If action is needed, make it optional and not time‑sensitive.

Do not pair a required action with a disappearing timer. If the message spans more than one line, do not 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/v3/components/message-bar/message-bar-usage-status.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### System-related information

**Global** message bars are most often used to communicate system events that affect the whole page or environment.

Communicate system health, warnings, or critical alerts that the user must be aware of regardless of where they are in the product.  If an action is required, make it clear and available within the bar. If no action is possible, state what will happen next or where to learn more.

<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/v3/components/message-bar/message-bar-usage-system-info.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

There are two types of message bars: global and contextual.

* **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 multiple message bars are present, they should stack from top to bottom, with the newest bar displayed at the top.

<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/components/message-bar/message-bar-kinds-2.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Options

Message bars can optionally include **timed behavior, a dismiss option, and action button.** These are functional additions, not just visual choices, and should only be used when the message needs them.

For details about timer, dismiss, and action, review the [interaction](/components/message-bar/) guidelines.

## Layout

### Alignment

Left alignment is the default and should be used in most instances. If the text wraps to two lines or more, left-align the message to improve readability.

Center alignment is available for short messages, such as concise confirmations or feedback. 

### 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/v3/components/message-bar/messsage-bar-layout.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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 available for message bars. Choose the option that best represents the intent of the message. Icons and body text colors remain consistent. Semantic titles provide clarity and enhance accessibility, and therefore should not be altered.

<details data-name='image-block' data-images='[{"alt":"Image showing the 4 semantic colors and their corresponding icons.","caption":"| 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 thealert-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/v3/components/message-bar/message-bar-colors.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interaction

### Behavior and states

The message bar does not include its own states. Only the optional **dismiss and action buttons** **have states**, following the established button guidelines.

The timer is a behavior that applies when a timed message bar is selected.

<details data-name='image-block' data-images='[{"alt":"Image showing the three behaviors for message bars.","caption":"","url":"https://dds.dell.com/site/v3/components/message-bar/message-bar-interaction.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### Dismiss button

The dismiss button lets users close the message bar when the information is no longer needed. It should only be included when dismissing the message makes sense for the context, such as when the message is optional, temporary, or not critical to the user’s workflow.

Use a dismissible message bar only for informative or success messages. Avoid using the dismiss button for important or persistent messages that users must see or act on.

#### Action button

Use an action in a message bar only when the user may need to take a next step. The action should be directly related to the message and limited to a single, clear option. If the message is only informing the user and does not require follow‑up, do not include an action.

Timed message bars should never contain actions, since users may not have enough time to respond before the bar disappears.

The action button is an optional tertiary button that triggers an action. It is displayed aligned at the top-right of the component.

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

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

## 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 |
| ------------------------------------ | ---------- | ------------------------------------------------- | ------- |
| message-bar/gap                      | Component  | `var(--dds-message-bar-gap)`                      | -       |
| message-bar/padding                  | Component  | `var(--dds-message-bar-padding)`                  | -       |
| message-bar/min-height               | Component  | `var(--dds-message-bar-min-height)`               | -       |
| border/radius/xs                     | Semantic   | `var(--dds-border-radius-xs)`                     | -       |
| color/background/INFO/subtle-rest    | Semantic   | `var(--dds-color-background-info-subtle-rest)`    | #D9F5FD |
| spacing/sm                           | Semantic   | `var(--dds-spacing-sm)`                           | -       |
| icon/size/xs                         | Component  | `var(--dds-icon-size-xs)`                         | -       |
| message-bar/icon-height              | Internal   | `var(--dds-message-bar-icon-height)`              | -       |
| color/text/INFO/rest                 | Semantic   | `var(--dds-color-text-info-rest)`                 | #0063B8 |
| button/gap/xs                        | Component  | `var(--dds-button-gap-xs)`                        | -       |
| button/padding-horizontal/xs         | Component  | `var(--dds-button-padding-horizontal-xs)`         | -       |
| button/size/xs                       | Component  | `var(--dds-button-size-xs)`                       | -       |
| border/width/xs                      | Semantic   | `var(--dds-border-width-xs)`                      | -       |
| color/background/SURFACE/neutral     | Semantic   | `var(--dds-color-background-surface-neutral)`     | #FFFFFF |
| color/text/BRAND/rest                | Semantic   | `var(--dds-color-text-brand-rest)`                | #0063B8 |
| button/background/ghost-rest         | Component  | `var(--dds-button-background-ghost-rest)`         | -       |
| color/text/NEUTRAL/rest              | Semantic   | `var(--dds-color-text-neutral-rest)`              | #1D2C3B |
| message-bar/timer/height             | Component  | `var(--dds-message-bar-timer-height)`             | -       |
| color/background/INFO/base-rest      | Semantic   | `var(--dds-color-background-info-base-rest)`      | #0672CB |
| color/background/SUCCESS/subtle-rest | Semantic   | `var(--dds-color-background-success-subtle-rest)` | #E9F5CE |
| color/text/SUCCESS/rest              | Semantic   | `var(--dds-color-text-success-rest)`              | #436F00 |
| color/background/SUCCESS/base-rest   | Semantic   | `var(--dds-color-background-success-base-rest)`   | #4F7D00 |
| color/background/WARNING/subtle-rest | Semantic   | `var(--dds-color-background-warning-subtle-rest)` | #FEEFCB |
| color/text/WARNING/rest              | Semantic   | `var(--dds-color-text-warning-rest)`              | #925400 |
| color/background/ERROR/subtle-rest   | Semantic   | `var(--dds-color-background-error-subtle-rest)`   | #FFECEE |
| color/text/ERROR/rest                | Semantic   | `var(--dds-color-text-error-rest)`                | #BB2A33 |

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