Skip to main content

Alert Banner

Prominent element used to display important messages or notifications to users. Alert Banners can convey various levels of urgency, such as success, warning, or error. They are designed to capture the user's attention and provide a clear and concise message.

Key Features

  • Noticeability

    The Alert Banner stands out from the rest of the user interface. However, in many cases, it should not be too obtrusive or hinder the users interaction with the application.

  • Accessibility

    Used appropriate color contrast to accommodate users with visual impairments. Additionally, provide icons to better emphasize the alerts intention.



Expressed through appropriate colors and icons, allows the nature of the information to be communicated clearly and accurately.

  • None (neutral message),
  • Success (positive message),
  • Warning (caution-required message),
  • Negative (alerting/failure message).

A Banner Alert has the capability to include one or two actions alongside the message. These added actions enable the user to respond immediately.

Close button

The Alert Banner offers the option to add a close button, allowing users to dismiss the banner.

PropertyValuesDefault value
None, Success, Warning, Negative
Yes / No
Close Button
Yes / No


alert banner anatomy
    1. Intent Icon
    2. Label
    3. Action Button
    4. Second Action Button
    5. Close button
    6. Container

Best Practices

Only for important information

Use banners when necessary, particularly for important system-level information. Avoid overusing them for trivial messages, as this can lead to users minimizing their importance.



Whenever possible, provide the user with opportunities to take immediate action, such as fixing an error. This not only makes it easier for them to respond to messages, but also improves their overall experience and reduces cognitive load.


Place on top and once

The placement of the Alert banner is an important consideration. It should be placed at the top of the interface. Ensure it does not obscure other parts of the interface. Use Inline Banner or Inline Message when you want to display relevant messages or prompts within the context of the main content

Content Guidelines

Clear and concise

It is essential to keep the Alert Banner message clear and straightforward. Its content should be easy to understand for any recipient, unambiguous, and concise. Try to fit the message into one line of text.



Alert Banner should inform, as precisely as possible, about the nature of the error. General messages that something has gone wrong should be avoided.