YouTipBootstrap Button Plugin
The Button was introduced in the (#) chapter. With the Button plugin, you can add some interactivity, such as controlling button states, or creating button groups for other components (like toolbars).
## Loading State
To add a loading state to a button, simply add the **data-loading-text="Loading..."** attribute to the button element, as shown in the following example:
## Example
$(function() { $(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function() { // $(this).button('reset'); // $(this).dequeue(); }); }); });
[Try it »](#)
The result is as follows:
## Single Toggle
To activate the toggle for a single button (i.e., change the button's normal state to a pressed state, and vice versa), simply add the **data-toggle="button"** attribute to the button element, as shown in the following example:
## Example
[Try it »](#)
The result is as follows:
## Checkbox
You can create a checkbox group and add toggle functionality to the checkbox group by adding the data attribute **data-toggle="buttons"** to the **btn-group**.
## Example
[Try it »](#)
The result is as follows:
## Radio
Similarly, you can create a radio button group and add toggle functionality to the radio button group by adding the data attribute **data-toggle="buttons"** to the **btn-group**.
## Example
[Try it »](#)
The result is as follows:
## Usage
You can enable the Button plugin **via JavaScript**, as follows:
$('.btn').button()
## Options
_No options._
## Methods
Here are some useful methods for the Button plugin:
| Method | Description | Example |
| --- | --- | --- |
| button('toggle') | Toggles the pressed state. Gives the button the appearance of being activated. You can enable automatic toggling of the button using the **data-toggle** attribute. | $().button('toggle') |
| .button('loading') | When loading, the button is disabled, and the text becomes the value of the button element's **data-loading-text** attribute. | $().button('loading') |
| .button('reset') | Resets the button state, and the text content reverts to the original content. This method is very useful when you want to return the button to its original state. | $().button('reset') |
| .button(string) | The string in this method refers to any string declared by the user. Using this method, resets the button state and adds new content. | $().button(string) |
### Example
The following example demonstrates the usage of the methods above:
## Example