Banner

Also known as

Alert, Application Message, Notification, Strip, System Message
Available since
@salt-ds/core@1.0.0

Banner is a type of notification that displays a message or provides feedback related to the user’s current workflow, spanning the page or container horizontally. It can communicate new information, errors, warnings, or successful completion of a process or task.

Density
Mode

The static banner displays information to the user, has no interactive elements, and is nonfunctional.

A status icon displays alongside a supporting message.

The interactive banner displays information to the user, has at least one function allowing users to dismiss or resolve it, and can include additional interactive elements as needed (i.e., links, buttons).

Use BannerActions to add actions such as close and refresh.

A status icon displays alongside a supporting message.

Use the info banner when you need to display general information the user is unaware of, such as a link to updated terms and conditions.

An info icon displays alongside a supporting message.

Use the error banner to communicate a critical issue preventing the user from completing a task, such as a system error or technical failure. The messaging should tell the user how to resolve it.

An error icon displays alongside a supporting message.

Use the warning banner to inform users of an issue or potential issue related to their current task that won't prevent them from continuing the task, but may cause errors if they don't address it, such as a restriction due to entitlements or current system status.

A warning icon displays alongside a supporting message.

Use the success banner to confirm that a user's action related to their current task was successful.

A success icon displays alongside a supporting message.

Use variant="secondary" to provide additional emphasis to the banner.

Use multiline banners when you need to display a longer message to the user or when you want to provide multiple actions.