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.
|Web resource key:||
|AMD Module key:||N/A|
There are several flag types with different colours and icons.
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.
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
<a> when the action
can take the user to another location in the system.
When a flag is closed, the native event
aui-flag-close is triggered on the flag DOM element. This event bubbles.
||Sets the type of the message||"success" | "info" | "warning" | "error"||info|
||The main content of the message.||HTML||none|
||The closing behaviour that this flag has.
||"auto" | "manual" | "never"||"manual"|
||The time duration in milliseconds for the flag to disappear when the
||Sets the title text of the message.||Plain text||none|
Side note: whether you'd follow these guidelines or not, it's always advised to at least test your markup with a screen reader software.
When the flag is set to disappear automatically, it's important to consider that some users may require more time to engage with it. Ensure the duration is long enough, or consider using the default settings, to allow sufficient interaction time for all users.
Please use the Web Accessibility Initiative (WAI) patterns as a reference for implementing accessible components.