Buttons

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.

Copy
<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
  Loading state
</button>
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>

Single toggle

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

Copy
<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>

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.

Copy
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active"><input type="checkbox" checked> Option 1 (pre-checked)</label><label class="btn btn-primary"><input type="checkbox"> Option 2</label><label class="btn btn-primary"><input type="checkbox"> Option 3</label></div>

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.

Copy
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Option 1 (preselected)</label><label class="btn btn-primary"><input type="radio" name="options" id="option2"> Option 2</label><label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

Usage

Enable buttons via JavaScript:

Copy
$('.btn').button()

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.

Copy
<button type="button" class="btn btn-primary" data-toggle="button">...</button>

$().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.

Copy
<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
<script>
  $('#loading-example-btn').click(function () {
    var btn = $(this)
    btn.button('loading')
    $.ajax(...).always(function () {
      btn.button('reset')
    });
  });
</script>

Cross-browser compatibility

Firefox persists form control states 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.

Copy
<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>