Message bar

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.

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

Critical

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

Examples

Success

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

Examples

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

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.

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

Status checklist