Related Pages:
Description
Message bars are nonmodal messages, informing users of updates or changes to system status.
Types
Type | Image |
|---|---|
Info |  |
Warning |  |
Usage & Behavior
General guidelines
Message Bar is triggered by the system.
Message bar stays on the screen. In some cases users will be able to close it.
Structure
The message bar may consist of:
Status Icon - On the left side, indicating the type of message bar.
Text - Content of the message. Long text will wrap up to 2 rows. Longer text will be truncated where the full text will show on tooltip.
Link (optional) - e.g. Learn more.
Close icon (optional).
Placement and Positioning
A Message Bar will be placed at the top of the container filling its entire width.
Interaction
Clicking the closing button (x) closes the message bar with a short fade effect. After dismissing the message bar the content below will move to take its place.
Best Practices
Use:
to display system generated messages and warnings.
when you need a way to show messages, while keeping the rest of the page interactive.
Don’t use:
for messages triggered by user actions - Use Toast message or Message popups
General
Keep the text short and informative.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
