Summary

Banners appear at the very top of the screen, within the application header, to display a prominent message at the top of the screen.

Status

API status: general
Web resource key: com.atlassian.auiplugin:aui-banner
AMD Module key: require('aui/banner')
Experimental API: 5.7
General API: 6

Examples

Code

A banner can be created either through the Javascript API or the Application Header soy template.

Javascript

The JavaScript API provides a flexible and convenient way to create and manage banners within your application. This allows you to dynamically generate banners with customized content and behavior, enabling the display of system-level messages to your users in a more interactive and engaging way.
By using AMD modules, you can easily include the necessary components for creating banners, ensuring that your code remains modular and maintainable. The banner body can be formatted using HTML, which includes text, links, and other elements, providing a rich and informative message for your users.

Soy

Soy Templates provide a powerful way to create reusable and dynamic HTML templates for your application. One of the key advantages of using Soy Templates is that they allow you to render banners on the server-side. This approach enables you to generate the final HTML output for the banner before sending it to the client, ensuring a consistent and efficient rendering process across different parts of your application.

Options

JavaScript options

These options are set in the options object when creating a flag with JavaScript:

Option Description Possible values Default
body The main content of the message. HTML ""
type The type of the message "warning" | "error" | "announcement" "error"

A11Y guidelines

Side note: whether you'd follow these guidelines or not, it's always advised to at least test your markup with a screen reader software.

Banner component does not provide automatic focus on the focusable elements inside. When it is necessary to interrupt the user's workflow to convey an important message and obtain a response, you must implement the autofocus feature yourself. Below are some useful resources:

Recommendation

Please use the Web Accessibility Initiative (WAI) patterns as a reference for implementing accessible components.