Related Pages:
| Table of Contents |
|---|
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 non-modal messages informing 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.
...
.
...
Types
Type | Image |
|---|---|
Info |  |
Warning |  |
Usage & Behavior
General guidelines
Message bar is bars are triggered only 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 a system event.
They are usually fixed on the screen. In some cases the user may be able to close them.
Structure
Message bars consist of:
a status icon on the left side, indicating the type of message.
message text, across a maximum of 2 lines. Longer messages will be truncated, with the full text shown in a Tooltip on hover.
a link, e.g. Learn more (optional).
a Close icon button (optional).
Placement and Positioning
Message bars are placed at the top of the 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
...