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

Examples

Error

The default form of a banner. Use error banners to inform users something critical has happened and requires immediate attention.

Warning

Use warning banners when you want the user to take a specific action or to warn them that something is about to go wrong.

Announcement

Announcement banners are used by admins who want to make a general announcement about the product. These banners do not contain an icon.

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.

<header id="header" role="banner"></header>

require(['aui/banner'], function (banner) {

    banner({

        body: 'Your <strong>license has expired!</strong> There are two days left to <a href="#">renew your license</a>.',

        type: 'warning',

    });

});

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.

{call aui.page.header}

    {param headerLogoText: 'confluence' /}

    {param bannerContent}

        Your license has expired. <a href="#">Click here to renew</a>.

    {/param}

    {param bannerType: 'error' /}

    {param primaryNavContent}

        <div class="aui-nav">

            <li><a href="https://example.com/">Navigation item or dropdown trigger</a></li>

        </div>

    {/param}

        {param secondaryNavContent}

        <div class="aui-nav">

            <li><a href="https://example.com/">Often an icon-only dropdown</a></li>

        </div>

    {/param}

{/call}

Options

JavaScript options

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

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.