OOUI/Elements/Flagged

OOUI
Introduction
About the library OOjs primer
Getting started
Creating interfaces programmatically PHP examples Using OOUI in MediaWiki
Working with widgets
Elements GroupElements FlaggedElements LookupElements DraggableElements Widgets Icons, Indicators, and Labels Buttons and Switches Selects and Options Inputs Popups Progress bars Layouts Fields and Fieldsets Forms Stacks and Panels Menus Booklets and Pages Index and TabPanels Windows Simple messages Dialogs Process Dialogs Message Dialogs Window managers Toolbars Themes Other concepts
See also
Fixing scripts and gadgets

The OO.ui.FlaggedElement class is an attribute mixin, meaning that it is used to add additional functionality to an element created by another class. The class provides a flags property assigned the name (or an array of names) of styling flags, which customize the look and feel of a widget to better describe its importance and functionality.

When an element is configured with a flags property, its CSS styling is updated. A widget that is configured to be ‘destructive’, for example, will be styled with the ‘oo-ui-flaggedElement-destructive’ CSS class.

For a full list of supported methods and configuration options provided by the FlaggedElement class, please see the code-level documentation.

Any flags can be set, and styling for them is defined in specific widgets/elements; some of them are described here below.

ButtonElement and Tool

• progressive - Progressive styling is applied to convey that the widget will move the user forward in whatever process they are in.
• destructive - Destructive styling is applied to convey that the widget will remove something.
• primary - Primary styling is applied when there is only one possible action, or to convey that this is the most common or recommended of several possible actions. (It is only meaningful for framed buttons with primary or destructive flag.)

Please see Buttons and Switches for an example of these flags.

ProcessDialog

Actions, which are a special kind of button used in process dialogs, use these flags:

• primary - The primary action (e.g., ‘save’ or ‘done’) moves the user forward in whatever process they are in. The primary action is positioned in the upper right corner of the dialog window. Since this is a button, the meaning of primary action for ButtonElement above also applies.
• safe - The safe action (e.g., ‘Cancel’) will make no changes. ‘Safe’ actions are usually configured without an action. Actions widgets that have no configured action will close the window without making changes. The safe action is positioned in the upper left corner of the dialog.
• back - Indicates that this action will go to the previous panel in the dialog. Actions with this flag automatically receive a "back" icon, replacing the label (on mobile only). It should only be used on "safe" actions.
• close - Indicates that this action will close the dialog. Actions with this flag automatically receive a "close" icon, replacing the label. It should only be used on "safe" actions.

Please see the documentation on action sets for more information about how the primary and safe flags are used.

TextInputWidget

The invalid flag is used internally to mark the user input as invalid. It should not be set directly, use setValidityFlag method.

MessageWidget

The error, warning, success, and notice flags are used internally to show different messages. It should not be set directly, use type instead.