Related Pages:
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
Message Bar is triggered by the system.
Message bar stay on the screen. In some cases users will be able to close it.
Structure
The message bar may consist of:
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.
Placement and Positioning
A Message Bar will be placed at the top of the container with full 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.
Best Practices
Use:
to display application-level messages, warnings, and errors.
when you need a relatively unobtrusive way to show messages, and to keep the rest of the page interactive.
Don’t use:
????
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
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
