A message banner is triggered when:
- There is an important update related to a pane. For instance: “John Doe has an overdue loan”.
- An error was made when filling a form.
The message banner has short and clear content with key information in bold.
If needed, action links can be added. They should be very short and clear. If there is no room for all action links, they should be placed under the message.
Message banners can be configured to be dismissed.
The message banner appears on screen load. If a message has to be displayed after screen load, it should push content downward. If more than one message needs to be displayed, they should be placed on top of each other.
When users scroll down, the message scroll with content.
If the message is dismissible, users need to click on the close icon to remove the message. If it is not, the message will be removed automatically when the information is nonrelevant.
Message banners are rectangles with 6px corner radius and 1px border.
They can have 4 different states: Default, error, success and warning.
Message banners at an accordion level
They should be displayed on top of the screen. An additional warning message should appear next to the corresponding field.
Message banners at an accordion level should have action links labelled with the name of the error field.
Message banners at a pane level
They should be displayed on top of the record pane.
Message banners for repeatable fields
They should be displayed on top of the set.