OOUI/Widgets/Buttons and Switches

Button widgets are created with button classes. You can create a 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 with the   option (live demo): "ButtonsAndSwitchesButtons3.png" 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  :"ButtonsAndSwitchesButtons2.png"

Use styling  to customize the look and feel (live demo): "OOUI Flagged Buttons.png"

Add an  to the play (live demo): "ButtonsAndSwitchesButtons_2.png" To see what icons are available, refer to the icon demo page.

Remove button frame (create a frameless button) by setting the  option to   (live demo):"ButtonsAndSwitchesButtons5.png" Assign a button title (displayed when the user hovers the mouse pointer over it) with the  option (live demo):"ButtonsAndSwitchesButtons6.png" Disable a button by setting the  option to   (live demo):"ButtonsAndSwitchesButtons7.png" Add an icon and title with the  and   options, respectively: "ButtonsAndSwitchesButtons8.png" If you use an icon-only button, you should add a hidden label for screen reader users by adding  and   options or a.

Add an indicator with the  option (live demo): "ButtonsAndSwitchesButtons9.png"

Add additional CSS styling with the  option: "ButtonsAndSwitchesButtons10.png" Specify a tab order with the  option. Please be aware that changing the tab order might negatively impact users of assistive technology if not done carefully:"ButtonsAndSwitchesButtons11.png" Use the  option to assign a keyboard shortcut to a button widget. Please be aware that using  might negatively impact screen readers:"ButtonsAndSwitchesButtons12.png" 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 (live demo):"ButtonsAndSwitchesToggleButtons1.png" 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 (live demo):"ButtonsAndSwitchesPopupButtons1.png" 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 (live demo): "ButtonsAndSwitchesToggleSwitch1.png" 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.