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 ofprimary
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.
OOUI is maintained by the Design System Team.
Get help:
|