Flags

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

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

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.

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.

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: