Usage

Enable buttons via JavaScript:

query('.nav-tabs').button()

Markup

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

Methods

Method Description
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.

Heads up! Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".
<button class="btn" data-loading-text="loading..." >...</button>
reset

Resets button state - swaps text to original text.

toggle

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

Heads up! You can enable auto toggling of a button by using the data-toggle attribute.
<button class="btn" data-toggle="button" >…</button>
<string>

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

<button class="btn" data-complete-text="done!">...</button>
<script>
  query('.btn').button('complete')
</script>

Examples

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.

<button class="btn btn-primary" data-loading-text="Loading...">Loading state</button>

Single toggle

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

<button class="btn" data-toggle="button">Single Toggle</button>

Checkbox

Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group.

<div class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</button>
</div>

Radio

Add data-toggle="buttons-radio" for radio style toggling on btn-group.

<div class="btn-group" data-toggle="buttons-radio">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</button>
</div>