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.
Users app with message banner

Structure

The message banner has short and clear content with key information in bold. 

Warning message error

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.

Behavior

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.

Style

Message banners are rectangles with 6px corner radius and 1px border.

They can have 4 different states: Default, error, success and warning.

Default message banner
Success message banner
Warning message banner
Error message banner

Location

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 banner with one link
Message banner with 2 links

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.

Related pages

A modal is a container triggered by a user’s action to give critical information about the action, to ask the user to take a decision ...
A toast is a self-dismissing bar used to give users non-critical info about action status within an app or another app: record created, fil...