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 nonmodal 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.
...
**image
Types
Type | Image |
|---|---|
Info |  |
Warning |  |
Usage & Behavior
General guidelines
Message bar 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.
...
. In some cases users will be able to close it.
Structure
The message bar may consist of:
Status Icon - In the left side center it has , indicating the type of message bar. Eg: success, info, warning or error.
Text - Show Content of the message. Long text will wrap up to the user about the status2 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
Full page:
A full-page message barA Message Bar will be placed
under the VerinTopat the top of the container 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
...