Bootstrap/docs/javascript/buttons.md

layout	title
page	Buttons

Buttons button.js

Example uses

Do more with buttons. Control button states or create groups of buttons for more components like toolbars.

Stateful

Add data-loading-text="Loading..." to use a loading state on a button.

Loading state

{% highlight html %} Loading state {% endhighlight %}

Single toggle

Add data-toggle="button" to activate toggling on a single button.

Single toggle

{% highlight html %} Single toggle {% endhighlight %}

Checkbox

Add data-toggle="buttons" to a group of checkboxes for checkbox style toggling on btn-group.

Pre-checked options need .active

For pre-checked options, you must add the .active class to the input's label yourself.

Option 1 (pre-checked) Option 2 Option 3

{% highlight html %}

Option 1 (pre-checked) Option 2 Option 3

{% endhighlight %}

Radio

Add data-toggle="buttons" to a group of radio inputs for radio style toggling on btn-group.

Preselected options need .active

For preselected options, you must add the .active class to the input's label yourself.

Option 1 (preselected) Option 2 Option 3

{% highlight html %}

Option 1 (preselected) Option 2 Option 3

{% endhighlight %}

Usage

Enable buttons via JavaScript:

{% highlight js %} $('.btn').button() {% endhighlight %}

Markup

Data attributes are integral to the button plugin. Check out the example code below for the various markup types.

Options

None

Methods

$().button('toggle')

Toggles push state. Gives the button the appearance that it has been activated.

Auto toggling

You can enable auto toggling of a button by using the data-toggle attribute.

{% highlight html %} ... {% endhighlight %}

$().button('loading')

Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute data-loading-text.

{% highlight html %} ... {% endhighlight %}

Cross-browser compatibility

Firefox persists form control states across page loads. A workaround for this is to use autocomplete="off".

$().button('reset')

Resets button state - swaps text to original text.

$().button(string)

Resets button state - swaps text to any data defined text state.

{% highlight html %} ... {% endhighlight %}