Message bar

null

Definition

Message bars are contextual banners that help users better navigate a flow or experience.

Anatomy

Defining shared language for discussing the construction and structure of this component.

null

Key

Category

Parts

1

Shape

Border radius, border color

2

Shape

Background color

3

Shape

Padding (block [top, bottom], inline [left, right])

4

Content

Dismiss action

5

Content

Icon

6

Content

Heading

7

Content

Message

8

Content

Support link

9

Content

Call to action, see Button

Usage

Storybook (previews work best on Firefox)

Message bars appear within specific features or sections. Regardless of message bar type, the following best practices apply:

  1. Content should help the user navigate the specific flow or experience– whether it’s a tip, warning, error, or confirmation.
  2. Content should relate to the feature or section where it appears.
  3. Through language or other context, users should understand why this message is appearing and how to dismiss it.

Variants

Figma (Internal only)

Sizes

States

Message bars do not have alternate states, but they may contain interactive elements within them, like support links or buttons, which have their own hover, active, and focus states.

Properties

See Figma (coming soon) for message bar component adjustable properties.

Informational

  • Used for content is helpful, but not critical, to the user’s task at hand
  • Blue
  • Info icon

Examples

null

Responsive example

null
null

Responsive example

null

High contrast mode relies on icons – rather than color – to distinguish between types.

High contrast mode has different themes. The examples shown below are from Windows 11.

Desert Theme

null

Responsive example

null

Night Sky Theme

null

Responsive example

null

Critical

  • Used to identify a task-blocking issue
  • Red
  • Exclamation icon
  • Includes actions user can take to fix the issue

Examples

null

Responsive example

null
null

Responsive example

null

High contrast mode relies on icons – rather than color – to distinguish between types.

High contrast mode has different themes. The examples shown below are from Windows 11.

Desert Theme

null

Responsive example

null

Night Sky Theme

null

Responsive example

null

Success

  • Used to confirm success following a user’s action
  • Green
  • Check mark icon

Examples

null

Responsive example

null
null

Responsive example

null

High contrast mode relies on icons – rather than color – to distinguish between types.

High contrast mode has different themes. The examples shown below are from Windows 11.

Desert Theme

null

Responsive example

null

Night Sky Theme

null

Responsive example

null

Warning

  • Used for content that is not an issue, but may become one if actions are not taken
  • Orange
  • Warning icon
  • Includes steps to prevent the issue

Examples

null

Responsive example

null
null

Responsive example

null

High contrast mode relies on icons – rather than color – to distinguish between types.

High contrast mode has different themes. The examples shown below are from Windows 11.

Desert Theme

null

Responsive example

null

Night Sky Theme

null

Responsive example

null

Behavior and interaction

When message bars appear, they move the existing content down without any animation. If they disappear, content moves back to the original location.

Responsive layout

Responsive layout is triggered when the message content is composed of multiple lines. Small screens, small parent containers and browsing resizing can all engage this trigger as well.

Writing guidelines

Tone should vary to match the type of message bar used. For example, error and warning copy should be less expressive and written with a non-expressive tone prioritizing clarity, while informational and success copy can be more expressive and enthusiastic.

Localization

Message bars support RTL languages.

null

To pressure test designs, use tools like Google Translate or Transvision to see how design reacts to Chinese, English, and German.

Not sure? Check with #l10n in Slack.

Accessibility

Message bars contain the ARIA 'role=status'. Learn more about ARIA roles

"The status role defines a live region containing advisory information for the user that is not important enough to be an alert." MDN

Need guidance? Check with #accessibility in Slack.

Changelog

Date

Version

Notes

Apr 22, 2024

1.1.0

Added link to Storybook

Nov 15, 2023

1.0.0

Initial draft of message bar guidance

Status checklist

All Themes

Works properly across all themes (theme name, theme name, etc...)

All Modes

Works properly across all modes (light, dark, high contrast)

All Desktop Environments

Works properly across all environments (Windows, MacOS, Linux)

Overall Accessibility

Has been tested and reviewed by A11y Team.

Color / Accessibility

All color has been tested against and passed all the latest WCAG 2.1 A & AA standards.

Text / Accessibility

All text has been tested against and passed all the latest WCAG 2.1 A & AA standards.

Contrast / Accessibility

All contrast has been tested against and passed all the latest WCAG 2.1 A & AA standards.

Interaction / Accessibility

All interactions have been tested against and passed all the latest WCAG 2.1 A & AA standards.

Content Design Review

Has been tested and reviewed by Content Design Team.

Writing Guidelines

Follows guidance for writing and language use.

Localization

Works properly across locales, and includes guidance for RTL languages.

Defined Behavior

Guidance for behavior when interacted with.

Defined Interactions

Guidance for interaction capabilities, ie. keyboard interactions.

Usage Guidelines

Includes guidance for usage, dos and don'ts, best practices.

Tokens

All attributes are available as tokens.

Figma Library

Has a reusable Figma component.

Storybook

Is documented in Storybook.

Code

Has a code counterpart.