Ask a question Design guidelines


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.


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



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


Creating a flag

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.


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


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