Related Pages:
| Table of Contents |
|---|
Description
Message bars are nonmodal non-modal messages , informing users of updates or changes to system status.
...
Types
Type | Image |
|---|---|
Info |  |
Warning |  |
Usage & Behavior
General guidelines
Message Bar is bars are triggered only by the a system event.
Message bar stays They are usually fixed on the screen. In some cases users will the user may be able to close itthem.
Structure
The message bar may Message bars consist of:
Status Icon - On a 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 text, across a maximum of 2 lines. Longer messages will be truncated where , with the full text will show on tooltip.Link (optional) - shown in a Tooltip on hover.
a link, e.g. Learn more (optional).
a Close icon button (optional).
Placement and Positioning
A Message Bar will be bars are placed at the top of the relevant container filling , and fill its entire width.
Interaction
Clicking the closing Close button (x) closes removes the message bar with a short fade effect.After dismissing closing the message bar the content below will move to take its placeup into the available space.
Best Practices
Use:
to display system-generated messages and warnings.
when you need a way to show messages, a message while keeping the rest of the page interactive.
...
for messages triggered by user actions - Use → use a Toast message or Message popups.
General
Keep the message text short and informative.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
...