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

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.

Events

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

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