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.

{% highlight html %} {% endhighlight %}

Single toggle

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

{% highlight html %} {% 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.

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 %}
{% 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.

Visual checked state only updated on click

If the checked state of a radio 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 %}
{% 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 %}