Bootstrap/docs/javascript/buttons.md

layout	title
page	Buttons

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

Uses

Stateful

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

{% example html %} Loading state

{% endexample %}

Single toggle

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

{% example html %} Single toggle {% endexample %}

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.

Visual checked state only updated on click

If the checked state of a checkbox button is updated without firing a click event on the button (e.g. via <input type="reset"> or via setting the checked property of the input), you will need to toggle the .active class on the input's label yourself.

{% example html %}

Option 1 (pre-checked) Option 2 Option 3

{% endexample %}

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.

Visual checked state only updated on click

If the checked state of a checkbox button is updated without firing a click event on the button (e.g. via <input type="reset"> or via setting the checked property of the input), you will need to toggle the .active class on the input's label yourself.

{% 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 (disabledness and checkedness) 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 %}