Banner

Also known as

Alert, Application Message, Notification, Strip, System Message

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.

Always position the banner component in the main content area or in the related container component. It should sit directly below the navigation and span the page or container horizontally.

Configure it to close when:

  • The user performs an action that fixes an issue, such as correcting a validation error.
  • The system status that triggered the notification is resolved, such as restoring a server connection.
  • To show a notification that applies to the user’s current task or workflow.
  • To notify users of an event that has occurred in a peripheral application or workflow. Instead, use Toast.
  • When a low priority event not requiring user feedback causes the notification. Instead, use Toast.

A banner typically has one or two lines of text. Make content short, clear, and concise, allowing users to quickly scan the notification and understand the situation and/or next steps.

Body Default applies to the content, however, if titles are necessary, configure them to display the Body Strong typography style across densities. See the typography foundation for more information.

To import Banner and related components from the core Salt package, use:

NameTypeDescriptionDefault
NameTypeDescriptionDefault
NameTypeDescriptionDefault