Related Pages:
Description
Message bars are nonmodal semantic dialogs that can be displayed at the top of the page or contextually within a task flow of the page.
Message bars display nonmodal messages that inform users of updates or changes to system status. Contextual message bars are most often used in task flows and forms, providing users additional context or information about a task.
Message Bar - Full page
Message Bar - Parts of page (Task related)
Types (Full page)
Type | Usage | Image |
|---|---|---|
Success | Actions that were completed successfully. |  |
Info | General information related to the task. |  |
Warning | System warnings or actions that may cause a problem. |  |
Error | System errors or actions that have failed to complete. |  |
Types (Task flow related)
Type | Usage | Image |
|---|---|---|
Success | Actions that were completed successfully. |  |
Info | General information related to the task. |  |
Warning | System warnings or actions that may cause a problem. |  |
Error | System errors or actions that have failed to complete. |  |
Usage & Behavior
General guidelines
Message bar is triggered by the system (e.g. a task error/warning).
Full page message bar appear from the top of the screen below the VerinTop.
Message bar stay on the screen until the user actively closes them or until the warning/error fixed by the user.
If there is no close icon button in message bar will disappear automatically after a few seconds with a fade effect except in warning and error message bars.
The user can always close a message bar manually, even if it will automatically close.
Structure
Status Icon - In the left side center it has the type of message bar. Eg: success, info, warning or error.
Text - Show the message to the user about the status.
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
Full page:
A full-page message bar will be placed under the VerinTop with full width.
Task related:
You can place the message bar anywhere in the page where it is relevant.
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
