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.
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.
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.
The Alert Banner offers the option to add a close button, allowing users to dismiss the banner.
None, Success, Warning, Negative
Yes / No
Yes / No
- Intent Icon
- Action Button
- Second Action Button
- Close button
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
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.