Banners
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:
- Accesible Alert Guide
- Accesible Alert Dialog Guide - includes an example with the autofocus feature implemented.
Recommendation
Please use the Web Accessibility Initiative (WAI) patterns as a reference for implementing accessible components.