OOUI/Widgets/Buttons and Switches

Button widgets are created with button classes. You can create a wide variety of looks, feels, and functionality via class configuration options.

The basic button class is the   class. Specialized button classes include: By default, a rendered button is a link that has no href attribute.
 * ButtonInputWidget class for HTML form buttons
 * ToggleSwitchWidget and ToggleButtonWidget classes for toggle switches, which have either on or off states
 * PopupButtonWidget class for popup buttons

Buttons
To create a basic button use the  class:



Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods.

Assign a hyperlink to open and a target with   and  :'''

Add a label with the  option:

Use styling  to customize the look and feel:

To remove a button frame (create a frameless button), set the  option to  :

Assign a button title (displayed when the user hovers the mouse pointer over it) with the  option:

To disable a button, set the  option to  :

Add an icon and icon title with the  and   options, respectively:

Add an indicator with the  option:

Add additional CSS styling with the  option:

Specify a tab order with the  option:

Use the  option to assign a keyboard shortcut to a button widget:

ButtonWidgets define the following public methods: ,  ,  ,  , but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the code-level documentation.

Toggle buttons
Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the  method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously.

To create a toggle button use the   class:



Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a  and   method, which are used to get and set the value of the button, respectively:

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

Popup buttons
Popup buttons toggle the visibility of a contained PopupWidget, which is used to display additional information or options. The popup itself can be accessed using the  method.

The popup can be placed inside an overlay to avoid being clipped by outer elements. See OOUI/Concepts for details.

To create a popup button use the   class:

Popup buttons can be configured in the same ways that basic buttons can be. Use the  method to return the popup so that can be interacted with: For a complete list of supported methods and configuration options, please see the code-level documentation for the  class.

Toggle switches
Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option.

To create a toggle-switch button use the   class:

s can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the  method. The  method will get the state value.

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