## Button Widget version added: 1.8

Description: Themable buttons and button sets.

## QuickNavExamples

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

In addition to basic push buttons, radio buttons and checkboxes (inputs of type radio and checkbox) can be converted to buttons. Their associated label is styled to appear as the button, while the underlying input is updated on click. For the association to work properly, give the input an `id` attribute, and refer to that in the label's `for` attribute. Don't nest the input inside the label, as that causes accessbility problems.

In order to group radio buttons, Button also provides an additional widget, called Buttonset. Buttonset is used by selecting a container element (which contains the radio buttons) and calling `.buttonset()`. Buttonset will also provide visual grouping, and therefore should be used whenever you have a group of buttons. It works by selecting all descendants and applying `.button()` to them. You can enable and disable a button set, which will enable and disable all contained buttons. Destroying a button set also calls each button's `destroy` method.

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

### 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

### disabledType: Boolean

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

Initialize the button with the disabled option specified:

`$(` `".selector"` `).button({ disabled:` `true` `});`

Get or set the disabled option, after initialization:

`// getter` `var` `disabled = $(` `".selector"` `).button(` `"option"``,` `"disabled"` `);` `// setter` `$(` `".selector"` `).button(` `"option"``,` `"disabled"``,` `true` `);`

### iconsType: Object

Default: `{ primary: null, secondary: null }`
Icons to display, with or without text (see `text` option). By default, the primary icon is displayed on the left of the label text and the secondary is displayed on the right. The positioning can be controlled via CSS. The value for the `primary` and `secondary` properties must be a class name, e.g., `"ui-icon-gear"`. For using only one icon: `icons: { primary: "ui-icon-locked" }`. For using two icons: `icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }`.
Code examples:

Initialize the button with the icons option specified:

`$(` `".selector"` `).button({ icons: { primary:` `"ui-icon-gear"``, secondary:` `"ui-icon-triangle-1-s"` `} });`

Get or set the icons option, after initialization:

`// getter` `var` `icons = $(` `".selector"` `).button(` `"option"``,` `"icons"` `);` `// setter` `$(` `".selector"` `).button(` `"option"``,` `"icons"``, { primary:` `"ui-icon-gear"``, secondary:` `"ui-icon-triangle-1-s"` `} );`

### labelType: String

Default: `null`
Text 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.
Code examples:

Initialize the button with the label option specified:

`$(` `".selector"` `).button({ label:` `"custom label"` `});`

Get or set the label option, after initialization:

`// getter` `var` `label = $(` `".selector"` `).button(` `"option"``,` `"label"` `);` `// setter` `$(` `".selector"` `).button(` `"option"``,` `"label"``,` `"custom label"` `);`

### textType: Boolean

Default: `true`
Whether to show the label. When set to `false` no text will be displayed, but the `icons` option must be enabled, otherwise the `text` option will be ignored.
Code examples:

Initialize the button with the text option specified:

`$(` `".selector"` `).button({ text:` `false` `});`

Get or set the text option, after initialization:

`// getter` `var` `text = $(` `".selector"` `).button(` `"option"``,` `"text"` `);` `// setter` `$(` `".selector"` `).button(` `"option"``,` `"text"``,` `false` `);`

## Methods

### destroy()

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:

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

### disable()

Disables the button.

- This method does not accept any arguments.

Code examples:

Invoke the disable method:

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

### enable()

Enables the button.

- This method does not accept any arguments.

Code examples:

Invoke the enable method:

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

### option( optionName )Returns: Object

Gets the value currently associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to get.

Code examples:

Invoke the method:

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

### option()Returns: PlainObject

Gets an object containing key/value pairs representing the current button options hash.

- This method does not accept any arguments.

Code examples:

Invoke the method:

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

### option( optionName, value )

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

- 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:

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

### option( options )

Sets one or more options for the button.

- options
  Type: Object
  A map of option-value pairs to set.

Code examples:

Invoke the method:

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

### refresh()

Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programmatically.

- This method does not accept any arguments.

Code examples:

Invoke the refresh method:

`$(` `".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:

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

## Events

### create( event, ui )Type: `buttoncreate`

Triggered when the button is created.

- event
  Type: Event
- ui
  Type: Object

Code examples:

Initialize the button with the create callback specified:

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

Bind an event listener to the buttoncreate event:

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

## Examples:

#### 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``=``"http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"``>`
`` `<``script` `src``=``"http://code.jquery.com/jquery-1.8.3.js"``></``script``>`
`` `<``script` `src``=``"http://code.jquery.com/ui/1.9.2/jquery-ui.js"``></``script``>`
`</``head``>`
`<``body``>`
`<``button``>Button label</``button``>`
`<``script``>`
`$( "button" ).button();`
`</``script``>`
`</``body``>`
`</``html``>`

#### Demo:

#### Example: A simple jQuery UI Buttonset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

`<!doctype html>`
`<``html` `lang``=``"en"``>`
`<``head``>`
`` `<``meta` `charset``=``"utf-8"``>`
`` `<``title``>button demo</``title``>`
`` `<``link` `rel``=``"stylesheet"` `href``=``"http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"``>`
`` `<``script` `src``=``"http://code.jquery.com/jquery-1.8.3.js"``></``script``>`
`` `<``script` `src``=``"http://code.jquery.com/ui/1.9.2/jquery-ui.js"``></``script``>`
`</``head``>`
`<``body``>`
`<``div` `id``=``"radio"``>`
`` `<``input` `type``=``"radio"` `id``=``"radio1"` `name``=``"radio"``><``label` `for``=``"radio1"``>Choice 1</``label``>`
`` `<``input` `type``=``"radio"` `id``=``"radio2"` `name``=``"radio"` `checked``=``"checked"``><``label` `for``=``"radio2"``>Choice 2</``label``>`
`` `<``input` `type``=``"radio"` `id``=``"radio3"` `name``=``"radio"``><``label` `for``=``"radio3"``>Choice 3</``label``>`
`</``div``>`
`<``script``>`
`$( "#radio" ).buttonset();`
`</``script``>`
`</``body``>`
`</``html``>`

#### Demo: