Components

Message Banner

9min

Message banners are used to inform users of important toolbox-specific events. They should be relevant to the user and the toolbox that the user is interacting with. Similarly, they should be as minimally disruptive as possible.

Component Availability
Added
CET 15.5 Major and above



Message banner types

To view when to utilize these message types, refer to System status.

Information

Information message banner
Information message banner


Warning

Warning message banner
Warning message banner


Error

Error message banner
Error message banner


Success

Success message banner
Success message banner


Usage guidelines

When to use

Information

Type of alert banner

Notifying users on available toolbox updates

Information message banner

Providing toolbox tips to users

Information message banner

Pending toolbox updates

Warning message banner

Undoable actions that require confirmation within toolbox

Warning message banner

Toolbox or individual toolbox section failed to load

Error message banner

Errors that are relevant to the toolbox

Error message banner

Successful updates, resulting from user actions within the toolbox

Success message banner

Toolbox is up to date

Success message banner

Overflow

Ensure messages shown in message banners are as short and concise as possible. Due to the limited amount of space available in toolboxes, overflow is usually required and the text should continue on a new line.

Dismissal

Message banners are persistent by default and can't be dismissed by the user at the moment. The events linked to these message banners should be handled appropriately by updating their visibility or styles accordingly to the state of the toolbox itself.

Code Example

To insert message banners in your toolboxes, refer to this Tutorial here.

Figma