Usage
- Use the message bar to display important announcements or notifications to the user.
- Use it to attract the user's attention without interrupting the user's task.
- Message bars appear within specific features or sections.
- Regardless of message bar type, the following best practices apply:
- Content should help the user navigate the specific flow or experience– whether it’s a tip, warning, error, or confirmation.
- Content should relate to the feature or section where it appears.
- Through language or other context, users should understand why this message is appearing and how to dismiss it.
- Do not use the message bar for displaying critical alerts or warnings that require immediate and focused attention.
- Do not span an entire page similar to an infobar component.
Design properties
See Storybook for code
| Property | Values | Default |
|---|---|---|
| Type Variant | Success | Warning | Critical | Information | Information |
| Show heading Boolean | true | false | true |
| Show support link Boolean | true | false | true |
| Show message Boolean | true | false | true |
| Dismissible Boolean | true | false | true |
| Show action Boolean | true | false | true |
| Responsive mode Variant | Off | On | Off |
Types
Informational
- Used for content is helpful, but not critical, to the user’s task at hand
- Blue
- Info icon
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
Critical
- Used to identify a task-blocking issue
- Red
- Exclamation icon
- Includes actions user can take to fix the issue
Success
- Used to confirm success following a user’s action
- Green
- Check mark icon
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. Informational and success copy can be more expressive and enthusiastic.
Localization
Message bars support RTL languages.
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
Aug 4, 2025 |
2.0.0 |
Simplified template |
|
Apr 22, 2024 |
1.1.0 |
Added link to Storybook |
|
Nov 15, 2023 |
1.0.0 |
Initial draft of message bar guidance |