|Working with widgets|
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, including:
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.
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
primaryaction 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.
invalid flag is used internally to mark the user input as invalid. It should not be set directly, use
notice flags are used internally to show different messages. It should not be set directly, use