Related Pages:
| Table of Contents |
|---|
Description
Message bars are nonmodal non-modal messages , informing users of updates or changes to system status.**image
...
Types
Type | Image |
|---|---|
Info |
 |
Warning |
 |
Usage & Behavior
General guidelines
Message Bar is bars are triggered only by the a system event.
Message bar stay 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 - In 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 shown in a Tooltip on hover. **19th June 2024 stopped here.
Learn more link - User can click the link to get more details about the message.
Close icon - In the right corner there is a close icon to close the message bar. You can remove it if you need to keep the message until the task is completed
a link, e.g. Learn more (optional).
a Close icon button (optional).
Placement and Positioning
...
Message
...
bars are placed at the top of the
...
Message bar height depends on the amount of text it contains.
...
Interaction
...
Mouseover a Message will keep it visible, even after exceeding the time limit before it disappears.
...
relevant container, and fill its entire width.
Interaction
Clicking the Close button (x)
...
removes the message bar with a short fade effect.After closing the message bar the content below will move up into the available space.
Best Practices
Use:
to display applicationsystem-level generated messages , and warnings, and errors.
when you need a relatively unobtrusive way to show messages, and to keep to show a message while keeping the rest of the page interactive.
Don’t use:
????for messages triggered by user actions → use a Toast message or Message popups.
General
Keep the message text short and informative.
For warning or error message bar
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
  |
Code
...