Message bar Preview

Resources

Types

Info

Use an info message bar to communicate helpful information that doesn’t require immediate action but that could improve an experience. For example, when an app has updates or a report can be personalized. Link and buttons are optional.

Success

Use a success message bar to communicate that something went right related to the surface where it appears, the whole app, or a task someone just completed. Link and buttons are optional.

Warning

Use a warning message bar to inform about temporary states, like connectivity issues, or states that could become harmful or destructive. Warnings alert people to potential consequences, but don’t prevent them from moving forward in a task. Warnings must include a button, link, or both to help prevent a problem.

Error

Use an error message bar when something goes wrong that needs to be addressed before continuing, like an application losing connection or entering invalid information. Errors block people from moving forward in a task. Error message bars must include a button, link, or both to help resolve the problem.

Behavior

Reflow

The container for message bars is flexible, allowing growth in both height and width to accommodate the content and the surface the message bar is on. Message bar content never truncates. For a cleaner layout, reflow after the second line pushes a message bar’s actions below the body.

A full-page bar fits the width of the page while growing in height to show the entire message.

Messages within containers likewise fit the width of the content area for that container and reflow as needed.

Dismissal

Message bars are always dismissible with a Close button (X) to allow people to get them out of the way. However, if someone dismisses a warning or error message without taking a necessary action, the message bar will reappear in their next session and continue to reappear until action is taken to resolve the problem.

You can also set conditions for the system to proactively dismiss the message.

Layout

Stacking multiple message bars

There can be more than one message bar at the top of a page or content container. When stacking message bars, order them by type, from most critical to least, as follows:

1. Error
2. Warning
3. Success
4. Informational

App or feature-level message bars

A page-level message bar communicates information about the state of the whole app or the specific page it is on. It appears below the command bar in the main content area. Don’t place it above the side navigation.t

Container-level message bars

A container-level message bar informs about the state of the content within a specific content container such as a section, tab, card, dialog, or drawer.

Generally, place message bars at the top of a container, or just below a title or header. If you need to communicate feedback in multiple areas, use more than one message bar on a page.

Consider the margins when using a container-level message bar, which has rounded corners. The message bar may be smaller than the 320 pixel width for container-level instances.

Tab-level

A tab-level message bar informs about the state of content within a tab. Place it just below the tabs and above the main content for that tab.

Card-level

A card-level message bar informs about the state of a card. On a card with dividers, place it below the card title. On a card without dividers, place it below the card header.

Within a form

A message bar notifies people about one or more problems in a form. When a form is submitted with errors, focus moves up to the message bar at the top of the form, scrolling the page, if necessary. The specific errors are then reinforced with one or more inline error messages next to the problematic fields.

Drawer-level

A drawer-level message bar informs about the state of secondary content or actions in a drawer. Place it below the header and at the top of the content area.

Accessibility

Error and warning message bars have an assertive aria-live, so they interrupt any other announcement a screen reader is making. Informational and success message bars are polite; they’re only read if someone selects them.

Too many interruptions can disrupt someone’s flow. Highlight only critical messages so you don’t overload a flow with too many assertive message bars.

Content

1. Title (optional) improves scannability by putting the most important info first.
2. Body (required) summarizes the message clearly and quickly.
3. Dismiss (optional) allows the user to get the message bar out of the way.
4. Link (optional) provides additional information related to the message.
5. Button (optional) provides a clear next step related to the message.

Communicate the main message in the title

Message bar titles help quick scanning and comprehension. They’re especially helpful for wider message bars that include a button that appears away from the main message. Putting the most important information in a bold title helps connect that information to the button action.

Summarize the main information with a clear, concise, and specific word or phrase. For exampe, “Almost out of storage” is clearer than just “Warning”.

Use sentence style capitalization—only capitalize the first word. For more info, see Capitalization in the Microsoft Writing Style Guide.

Give additional context in the message body

Provide clear, concise, actionable information that the user needs in order to proceed. Aim for one or two short sentences. Don’t repeat the title in the message body. Build on it instead.

Avoid messages longer than 2 lines of about 100 characters each. Additional content will always wrap, never truncate and can make the message bar large and hard to scan. If a longer explanation is needed, link out to documentation instead.

Write useful success messages

In success messages, don’t congratulate people for ordinary task completion. Avoid the words “success” or “successfully.” Instead, state what’s ready or changed specifically, along with other useful or actionable details.

Success messages state specifically what’s changed

Use links for additional info

Error and Warning messages must have either a link to content or a button to take action, or both. Links and buttons are optional in success and information messages.

Use links for supplementary information related to the message, to help people make informed decisions and understand why they’re seeing the message.

Start the link text with a verb like “Learn” or “Explore” and then describe what, specifically, they’ll learn about. Good link text allows people to accurately predict where the link goes and what they can do when they get there. Don’t use URLs as link text and never use “Click here.” For more information on writing good links, go to Link Content.

Use links to provide additional info related to the message

Write buttons in response to titles

Button labels should directly respond to the title and message. It should be clear that selecting the button will address the reason for the message bar.

Usually a single verb is best. Include a noun if there’s any room for interpretation about what the verb means. For example, say “Renew license” or “Start trial.” For more information on writing good button labels, go to Button Content.

Button labels should be clear and direct responses to message titles

Use sentence style capitalization—only capitalize the first word. For more info, see Capitalization in the Microsoft Writing Style Guide.