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.

{% callout danger %}

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

Stateful

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

{% callout info %}

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

{% example html %} Loading state

{% endexample %}

Single toggle

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

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

{% callout warning %}

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

Checkbox and radio

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

{% callout warning %}

Preselected options need .active

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

{% callout warning %}

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

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