Related Pages:
| Table of Contents |
|---|
Description
Message bars are nonmodal messages, informing users of updates or changes to system status.**image
...
Types
Type | Image | |
|---|---|---|
Info |  | |
Warning |  |
Usage & Behavior
General guidelines
...
Status Icon - In 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 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.
Link (optional) - e.g. Learn more.
Close icon (optional).
Placement and Positioning
A Message Bar will be placed at the top of the container with full filling its entire width.
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.
Clicking the closing button (x) closes the message bar with a short fade effect. (check with Guy) After dismissing message bar the content below will move to take its place.
Best Practices
Use:
to display application-level messages, warnings, and errorssystem generated messages and warnings.
when you need a relatively unobtrusive way to show messages, and to keep 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.For warning or error message bar
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
**Asaf to check
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
...