Button Widget

Categories: Widgets

Button Widgetversion added: 1.8, rewritten: 1.12

Description: Themeable buttons.

QuickNavExamples

Options

Methods

Events

Button enhances standard form elements like buttons, inputs and anchors to themeable buttons with appropriate hover and active styles.

When using an input of type button, submit or reset, support is limited to plain text labels with no icons.

Note: The button widget was rewritten in 1.12. Some options changed, you can find documentation for the old options in the 1.11 button docs. This widget used to bundle support for inputs of type radio and checkbox, this is now deprecated, use the checkboxradio widget instead. It also used to bundle the buttonset widget, this is also deprecated, use the controlgroup widget instead.

Theming

The button widget uses the jQuery UI CSS framework to style its look and feel. If button specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option:

  • ui-button: The DOM element that represents the button. This element will additionally have the ui-button-icon-only class, depending on the showLabel and icon options.
    • ui-button-icon: The element used to display the button icon. This will only be present if an icon is provided in the icon option.
    • ui-button-icon-space: A separator element between icon and text content of the button. This will only be present if an icon is provided in the icon option and the iconPosition option is set to "beginning" or "end".

Dependencies

Additional Notes:

  • This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

Options

classes 

Type: Object
Default: 
{
  "ui-button": "ui-corner-all",
}

Specify additional classes to add to the widget's elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the learn article about the classes option.

Code examples:

Initialize the button with the classes option specified, changing the theming for the ui-button class:

1
2
3
4
5
 
$( ".selector" ).button({
  classes: {
    "ui-button": "highlight"
  }
});

Get or set a property of the classes option, after initialization, here reading and changing the theming for the ui-button class:

1
2
3
4
5
 
// Getter
var themeClass = $( ".selector" ).button( "option", "classes.ui-button" );
 
// Setter
$( ".selector" ).button( "option", "classes.ui-button", "highlight" );

disabled 

Type: Boolean
Default: false
Disables the button if set to true.
Code examples:

Initialize the button with the disabled option specified:

1
2
3
 
$( ".selector" ).button({
  disabled: true
});

Get or set the disabled option, after initialization:

1
2
3
4
5
 
// Getter
var disabled = $( ".selector" ).button( "option", "disabled" );
 
// Setter
$( ".selector" ).button( "option", "disabled", true );

icon 

Type: String
Default: null

Icon to display, with or without text (see showLabel option). By default, the icon is displayed on the left of the label text. The positioning can be controlled using the iconPosition option.

The value for this option must match an icon class name, e.g., "ui-icon-gear".

When using an input of type button, submit or reset, icons are not supported.

Code examples:

Initialize the button with the icon option specified:

1
2
3
 
$( ".selector" ).button({
  icon: "ui-icon-gear"
});

Get or set the icon option, after initialization:

1
2
3
4
5
 
// Getter
var icon = $( ".selector" ).button( "option", "icon" );
 
// Setter
$( ".selector" ).button( "option", "icon", "ui-icon-gear" );

iconPosition 

Type: String
Default: "beginning"

Where to display the icon: Valid values are "beginning", "end", "top" and "bottom". In a left-to-right (LTR) display, "beginning" refers to the left, in a right-to-left (RTL, e.g. in Hebrew or Arabic), it refers to the right.

Code examples:

Initialize the button with the iconPosition option specified:

1
2
3
 
$( ".selector" ).button({
  iconPosition: "end"
});

Get or set the iconPosition option, after initialization:

1
2
3
4
5
 
// Getter
var iconPosition = $( ".selector" ).button( "option", "iconPosition" );
 
// Setter
$( ".selector" ).button( "option", "iconPosition", "end" );

label 

Type: String
Default: null

HTML to show in the button. When not specified (null), the element's HTML content is used, or its value attribute if the element is an input element of type submit or reset, or the HTML content of the associated label element if the element is an input of type radio or checkbox.

When using an input of type button, submit or reset, support is limited to plain text labels.

Code examples:

Initialize the button with the label option specified:

1
2
3
 
$( ".selector" ).button({
  label: "custom label"
});

Get or set the label option, after initialization:

1
2
3
4
5
 
// Getter
var label = $( ".selector" ).button( "option", "label" );
 
// Setter
$( ".selector" ).button( "option", "label", "custom label" );

showLabel 

Type: Boolean
Default: true
Whether to show the label. When set to false no text will be displayed, but the icon option must be used, otherwise the showLabel option will be ignored.
Code examples:

Initialize the button with the showLabel option specified:

1
2
3
 
$( ".selector" ).button({
  showLabel: false
});

Get or set the showLabel option, after initialization:

1
2
3
4
5
 
// Getter
var showLabel = $( ".selector" ).button( "option", "showLabel" );
 
// Setter
$( ".selector" ).button( "option", "showLabel", false );

Methods

destroy()Returns: jQuery (plugin only)

Removes the button functionality completely. This will return the element back to its pre-init state.
  • This method does not accept any arguments.
Code examples:

Invoke the destroy method:

1
 
$( ".selector" ).button( "destroy" );

disable()Returns: jQuery (plugin only)

Disables the button.
  • This method does not accept any arguments.
Code examples:

Invoke the disable method:

1
 
$( ".selector" ).button( "disable" );

enable()Returns: jQuery (plugin only)

Enables the button.
  • This method does not accept any arguments.
Code examples:

Invoke the enable method:

1
 
$( ".selector" ).button( "enable" );

instance()Returns: Object

Retrieves the button's instance object. If the element does not have an associated instance, undefined is returned.

Unlike other widget methods, instance() is safe to call on any element after the button plugin has loaded.

  • This method does not accept any arguments.
Code examples:

Invoke the instance method:

1
 
$( ".selector" ).button( "instance" );

option( optionName )Returns: Object

Gets the value currently associated with the specified optionName.

Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar" would get the value of the bar property on the foo option.

  • optionName
    Type: String
    The name of the option to get.
Code examples:

Invoke the method:

1
 
var isDisabled = $( ".selector" ).button( "option", "disabled" );

option()Returns: PlainObject

Gets an object containing key/value pairs representing the current button options hash.
  • This signature does not accept any arguments.
Code examples:

Invoke the method:

1
 
var options = $( ".selector" ).button( "option" );

option( optionName, value )Returns: jQuery (plugin only)

Sets the value of the button option associated with the specified optionName.

Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName. For example, "foo.bar" would update only the bar property of the foo option.

  • optionName
    Type: String
    The name of the option to set.
  • value
    Type: Object
    A value to set for the option.
Code examples:

Invoke the method:

1
 
$( ".selector" ).button( "option", "disabled", true );

option( options )Returns: jQuery (plugin only)

Sets one or more options for the button.
  • options
    Type: Object
    A map of option-value pairs to set.
Code examples:

Invoke the method:

1
 
$( ".selector" ).button( "option", { disabled: true } );

refresh()Returns: jQuery (plugin only)

Refreshes the visual state of the button. Useful for updating button state after the native element's disabled state is changed programmatically.
  • This method does not accept any arguments.
Code examples:

Invoke the refresh method:

1
 
$( ".selector" ).button( "refresh" );

widget()Returns: jQuery

Returns a jQuery object containing the element visually representing the button.
  • This method does not accept any arguments.
Code examples:

Invoke the widget method:

1
 
var widget = $( ".selector" ).button( "widget" );

Events

create( event, ui )Type: buttoncreate

Triggered when the button is created.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the button with the create callback specified:

1
2
3
 
$( ".selector" ).button({
  create: function( event, ui ) {}
});

Bind an event listener to the buttoncreate event:

1
 
$( ".selector" ).on( "buttoncreate", function( event, ui ) {} );

Example:

A simple jQuery UI Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>button demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<button>Button label</button>
 
<script>
$( "button" ).button();
</script>
 
</body>
</html>

Demo: