OOUI/Widgets/Icons, Indicators, and Labels

Icon and indicator widgets contain small graphics (about the size of normal text) that efficiently convey information to help users interact with and understand an interface.

Labels are also used to help identify interface components. The value of a label can be set to a string, a label node, or a function that returns them.

Icons
The OOUI library contains over 100 icons that can be used by s to create small graphical elements that handle events. s should rarely be used without a label, though a label may be omitted if space is at a premium (e.g. in a toolbar) or if the icon is used in a context where its meaning is very clear to the user. In these cases, consider using a quiet  instead (which can include a label and icon itself).

To create an, use an   with a   (IconWidget & LabelWidget live demo):



s support a number of methods that can be used to handle events and to get or set the value of contained elements. For example,  will return the name of the icon; , which takes either a symbolic icon name or a map of icon names keyed by language, will set the icon; and   will set the icon title. For a full list of supported methods and configuration options, please see the code-level documentation for s.

You need to load related styles somewhere before creating, e.g. via ResourceLoader. Modules named by mask, e.g.   for check icon. Group names can be found in demo page or in code.

Indicators
Indicators are small icons with very limited use cases:


 * To act as indicating elements within widgets on limited screen space, for example to signify a 'clear' action in a SearchInputWidget.
 * To clarify the function of a control that acts in an exceptional way (a dropdown that opens a menu instead of performing an action directly, for example).

s are often used by other widgets (e.g., text inputs, dropdowns, decorated options). In the following example, a  uses an indicator to help clarify that the field is required:



The following indicators are included in the OOUI library:

Methods can be used to set or get the indicator title ( and , respectively) or to get the name of the indicator. For a full list of supported methods and configuration options, please see the code-level documentation for IndicatorWidgets.

Labels
Labels help identify the function of interface elements. Each  can be configured with a   option that is set to a string, a label node, or a function:


 * String: a plaintext string
 * Label Node: a jQuery selection of elements. A jQuery selection is used for anything other than a plaintext label, e.g., a label that includes a link or special styling, such as a gray color or additional graphical elements.
 * Function: a function that will produce a string in the future. Functions are used in cases where the label value is not currently defined.  See Extending the Library for more information.

For a full list of supported methods and configuration options, please see the code-level documentation for s.