Flag

Ask a question Design guidelines

Summary

Flags are the primary method for providing system feedback in the product user interface. Messages include notifications of various kinds: alerts, confirmations, notices, warnings, info and errors.

Status

API status: general
Included in AUI core? Not in core You must explicitly require the web resource key.
Web resource key: com.atlassian.auiplugin:aui-flag
AMD Module key: N/A
Experimental API: 5.7
General API: 6

Examples

There are several flag types with different colours and icons.

Code

Flags can only be used through the Javascript API.

Javascript

Creating a flag

AخA
 
var myFlag = AJS.flag({
    type: 'success',
    body: 'Issue ADG-745 has been created.',
});

Note: The aui-nav-actions-list ul should be used when adding actions at the bottom of a Flag.

Closing a flag

You can close the flag by calling the close() method on the DOM element.

 
myFlag.close();

Flag actions

If the flag is more than just informational or there are obvious follow-up things a user could do, add a list of actions to the flag body to allow the user to easily take their next step.
Actions should have the appearance of a link, but should use the appropriate HTML element for the action — for example, use a <button> when the action is handled by JavaScript or does something on the current page; use an <a> when the action can take the user to another location in the system.

 
var myFlag = AJS.flag({
    type: 'success',
    body: 'Issue <strong>ADG-745</strong> has been created.' +
        '<ul class="aui-nav-actions-list">' +
        '<li><a class="aui-button aui-button-link" href="#">View issue</a></li>' +
        '<li><button class="aui-button aui-button-link">Add to sprint</button></li>' +
        '</ul>'
});

Events

When a flag is closed, the native event aui-flag-close is triggered on the flag DOM element. This event bubbles.

 
document.addEventListener('aui-flag-close', function() {
    alert('A flag has been closed');
});

Options

JavaScript options

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

Option Description Possible values Default
type Sets the type of the message success, info, warning, error info
body The main content of the message. HTML none
close The closing behaviour that this flag has. Valid options are "manual", "auto" and "never".
  • "auto" closing flags fade out over time, and have a close button.
  • "manual" closing flags do not fade out over time, and have a close button.
  • "never" closing flags do not fade out over time, and do not have a close button.
 string "manual"
title Sets the title text of the message. Plain text none