Enable buttons via JavaScript:
query('.nav-tabs').button()Data attributes are integral to the button plugin. Check out the example code below for the various markup types.
| 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 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>
| |
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
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>
Add data-toggle="button" to activate toggling on a single button.
<button class="btn" data-toggle="button">Single Toggle</button>
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>
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>