Banner

Usage

Banner provides a distinguishable and non-disruptive way to communicate important information or conditions to users. Banners should be used sparingly and only for important messages.

Best practices

Do

• Use banners to communicate in a prominent way to the user.
• Provide an action to resolve the issue described by a banner if possible.
• Keep banner messages short and descriptive.

Don't

• Avoid displaying more banners than one at a time.
• Don’t use banners for promotional messages or to explain features in the user interface.

Placement

Banners should be placed on top of the section or page they apply to and fill available width of the container.

Do

• Place a banner at the top of the page or section it applies to.

Don't

• Don’t make banners scroll with the user. Banners should be static.
• Don’t use banners for temporary messages. Use Toast instead.

Dismissing the banner

Banners should persist on the page until the user dismisses it or if the state that caused the banner is resolved.

Do

• Provide a close button, unless the banner is critical and has to be addressed by the user.

Don't

• Don’t automatically dismiss the banner with a timeout. If you need a temporary message use Toast instead.

Variants

Info

Shows information connected to the current task, but does not require any action from the user.

Warning

Informs the user about the unwanted state or the issue that is not critical and doesn’t block the user.

Error

Informs the user about a critical error that has to be addressed to proceed further.

Success

Confirms to the user that the action was completed as expected and might provide further actions helpful to the user.

Examples

Live Preview

Props

Slots

Events