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.

Cross-browser compatibility

Firefox persists form control states (disabledness and checkedness) across page loads. A workaround for this is to use autocomplete="off". See Mozilla bug #654072.

Stateful

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

Use whichever state you like!

For the sake of this demonstration, we are using data-loading-text and $().button('loading'), but that's not the only state you can use. See more on this below in the $().button(string) documentation.

{% example html %} Loading state

{% endexample %}

Single toggle

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

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

Pre-toggled buttons need .active and aria-pressed="true"

For pre-toggled buttons, you must add the .active class and the aria-pressed="true" attribute to the button yourself.

Checkbox and radio

Add data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.

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.

{% example html %}

Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3

{% endexample %}

{% example html %}

Radio 1 (preselected) Radio 2 Radio 3

{% endexample %}

Methods

$().button('toggle')

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

$().button('reset')

Resets button state—swaps text to original text.

$().button(string)

Swaps text to any data defined text state.

{% highlight html %} ...

{% endhighlight %}