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: experimental
Included in AUI core? Not in core You must explicitly require the web resource key.
Web resource key: com.atlassian.auiplugin:aui-flag
Experimental since: 5.7

Examples

Code

There are several flag types with different colours and icons. Flags can only be used through the Javascript API.

Javascript

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

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();

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