Banner

A Banner is a notification displayed in-context to convey an important message to users.

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.

Style / Variants / Danger
Style / Variants / Info
Style / Variants / Success
Style / Variants / Warning

Item

Variant

Description

1

Success

Indicates that an action has been completed successfully.

2

Warning

Brings the user’s attention to potential risks or important issues that need careful consideration.

3

Danger

Informs the users about a high-importance issue that needs immediate action. It is also used in forms to notify the user if some fields have been filled incorrectly, prompting them to fix the errors before submitting the form.

4

Info

Provides general information or updates that are relevant in the given context.

Other properties

Action

If the message in the Banner is actionable, you can add a Standalone Link to its content. Displaying a Button is not supported, because any action should always be performed within the context of the corresponding page and not directly from the Banner itself.

Close button

Banners can be configured to 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.

Do

Set the Banner's width to fill 100% of the parent container to achieve well balanced alignement.

Don't

Don't fix the width of the Banner as it will result in broken alignement and will impact user's ability to quickly scan the page.

 

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.
Example of a Banner

Example of a Banner

Example of an Alert

Example of an Alert

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.
Example of a System Wide Banner

Example of a System Wide Banner

Displayed at the top of the page, it informs the user about contract-related issues.

Example of a Banner

Example of a Banner

Displayed within the page's content, it informs the user about actions that need to be taken to finalize the entity creation process.

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

Behaviour

Mouse Interactions

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

Usage / Mouse Interactions
  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 navigation to another page.

 

Keybord interactions

Key

Interaction

Tab

Sets focus on the close button

Enter

Activates the close button and dismisses the Banner

Tab x2

sets focus on the Link

Enter

Activates the link and triggers the associated action

 


Content

Main elements

Element

Description

Title

Titles are optional and should be used for primary information when additional information needs to be added in the body.

Avoid messages longer than one line.

Body

In cases where the information can be shared with the user in one simple line, use the Body.

If more information needs to be shared with the user, use the Body for additional information, while the Title will be used for primary information.

Avoid writing long sentences and try to keep messages under 3 lines.

Link

Link texts should indicate the name of the page where users will be taken. This provides enough information for guests to confidently click on links. E.g. “For more information go to Help article”.

Integrate the link as a part of the sentence but try to keep the links at the end. When a link is used at the end, avoid adding a period “.” to ensure the link is as visible as possible.

Avoid abstract link text like “here”, “click here”, “more information”, etc.

Icon

Icons are predefined and cannot be replaced.

Tone

  • Be clear and concise: Ensure the message is clear and to the point to avoid confusion.
  • Keep it simple: Keep the banner content as simple as possible. It's important that it can be easily read and understood.