Banner

Guidelines

When to use

• Highlight content related information: Use Banners to catch the user's attention and inform them about something important related to the page’s content
• Notify about significant changes: Inform users about significant changes or conditions within the product that should be resolved to ensure the system is functioning correctly.
• Strengthen the form validation: Display a danger Banner on top of the form, notifying the user that certain input fields are not filled out correctly and need to be edited in order to submit the form successfully.

When not to use

• Non-significant information: Avoid using banners for low-priority information; use body copy text instead
• Task-generated feedback: For notifications triggered in response to a user's action during a specific task, or by the out-of-context events finished in the background use Alert instead.
• Application or contract related feedback: For notifications triggered by the application status or related to the user’s Mews contract, use System Wide Banner.
• Empty state: When no information is to be displayed due to a database error, no available data, or no matching search results found, an Empty State component should be used.

Variants

The Banner component comes in 4 semantic styles to indicate success, warning, danger, or neutral information. The variant should be chosen according to the message’s intent to ensure clear and meaningful communication.

Other properties

Action

It is possible to enable an action inside the Banner when necessary. Always prioritize using a Standalone Link and avoid Buttons.

Close button

Banners can include a close button so the user can manually dismiss them. This allows users to keep the page free of distractions and focus on their tasks. You can consider enabling manual dismissal when:

• The information is not crucial for fulfilling the task.
• Resolving the issues that triggered the message is not of a high priority at a given time.
• Use the Banner in a promotional way to inform users about new features or products.

 

Position

As an inline element, the banner is positioned alongside other components on the page. It should never cover other content.

For the best user experience, place Banners close to the items they relate to. In Forms, it's best to place the Banner at the top or bottom of the form or its section, unless it relates to a specific field — in which case, position it below that field.

For the best visual alignment, the banner’s width should be set to fill 100% of the parent container.

 

Banner vs. Alert

The Banner is an inline notification displayed alongside other elements on the page. It displays contextual information that can help users finish their tasks or inform them about actions they should take to ensure the system's correct functioning.

Alerts are non-modal, time-based notifications that appear overlayed on top of the page’s content. They are more disruptive than Banners and should be used for task-generated feedback or out-of-context events finished in the background. Examples of such tasks include:

• Successful creation of a new entity.
• Saving/deletion of a custom filter.
• Download completion.

Banner vs. System Wide Banner

While both Banner and System-Wide Banner are notification components that are displayed inline the page’s UI, they differ in prominence and the type of feedback they provide.

A Banner is placed inline the page’s content and displays contextual information that can help users finish their tasks or inform them about actions they should take to ensure the system's correct functioning.

System Wide Banner, on the other hand, is displayed full width on top of the page’s content and is used to notify the user about the application’s status or issues related to the Mews contract. Examples of such messages include:

• Loss of network connection.
• Application-level error.
• Need to upgrade the contract to receive new updates.

Best practices

• Don’t overuse Banners: While Banners are an effective method of communicating with users, they are disruptive and should be used sparingly. Avoid using more than two banners per page, or they will lose their impact.
• Use appropriate variant: Based on the message you need to convey, choose the correct semantic variant (info, success, danger, warning).
• Be thoughtful about the close button: Showing the close button is optional and should not be enabled if the message or the action is critical to the context

---

Behavior

Mouse Interactions

The default Banner has no interactive elements unless the close button or action properties are enabled.

1. Clicking the close button dismisses the banner and hides it from the UI.
2. Clicking on the Link will trigger an action, which in most cases will be navigating to another page.

 

Keybord interactions

 

---

Content

Title

• The title is optional. If there is only one sentence, do not use a title. Use it to add hierarchy for important information, and provide additional details or explanation in the description.
• Keep it short, limited to 1 line.

Description

• The description is mandatory and provides the full context and details of the message, ensuring the information is complete and clear.
• Use the title to complement the message if additional context is needed.
• Keep descriptions as short and clear as possible.

Link

• The link should clearly indicate the destination page. Do not use abstract link text like “here,” “click here,” “more information,” etc.
• Do not use a period “.” after the link.
• Follow the guidelines for links