Bootstrap Stateful Buttons

In this tutorial you will learn how to create toggle and loading Bootstrap buttons.

Controlling Button States

In the previous section you've learnt about the Bootstrap button styling and the modifications as well as how to create button groups and toolbars. However, with Bootstrap you can do more with buttons like controlling the states of buttons, make checkbox and radio inputs behaves like toggle buttons, etc. Let's discuss about them in detail.

Creating Single Toggle Button

You can activate toggling (i.e. change the normal state of a button to a push state and vice versa) on a single button by simply adding the data attribute data-toggle="button".

  • <button type="button" class="btn btn-primary" data-toggle="button">Single Toggle Button</button>

— The output of the above example will look something like this:


Add Loading State on Buttons

You can change the normal state of a button to a loading state by simply adding the data attribute data-loading-text="Loading..." to a button.

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

— The output of the above example will look something like this:

 

Note:Mozilla firefox persists the disabled state across page loads, to prevent this behavior, you may simply set autocomplete="off" on the form containing the buttons, or directly to the input or button element.


Creating Buttons Checkbox

You can add the attribute data-toggle="buttons" to a group of checkboxes for checkbox style toggling on button groups, like this:

  • <div class="btn-group" data-toggle="buttons">
  •     <label class="btn btn-primary">
  •         <input type="checkbox" name="options"> Option 1
  •     </label>
  •     <label class="btn btn-primary">
  •         <input type="checkbox" name="options"> Option 2
  •     </label>
  •     <label class="btn btn-primary">
  •         <input type="checkbox" name="options"> Option 3
  •     </label>
  • </div>

— The output of the above example will look something like this:

Add the class .active on input's label element if you want options pre-checked by default.

  • <div class="btn-group" data-toggle="buttons">
  •     <label class="btn btn-primary active">
  •         <input type="checkbox" name="options"> Option 1
  •     </label>
  •     <label class="btn btn-primary">
  •         <input type="checkbox" name="options"> Option 2
  •     </label>
  •     <label class="btn btn-primary active">
  •         <input type="checkbox" name="options"> Option 3
  •     </label>
  • </div>

Creating Buttons Radio

Similarly you can add the attribute data-toggle="buttons" to a group of radio inputs for radio style toggling on button groups, like this:

  • <div class="btn-group" data-toggle="buttons">
  •     <label class="btn btn-primary">
  •         <input type="radio" name="options"> Option 1
  •     </label>
  •     <label class="btn btn-primary">
  •         <input type="radio" name="options"> Option 2
  •     </label>
  •     <label class="btn btn-primary">
  •         <input type="radio" name="options"> Option 3
  •     </label>
  • </div>

— The output of the above example will look something like this:

Add the class .active on input's label element if you want an option pre-selected by default.

  • <div class="btn-group" data-toggle="buttons">
  •     <label class="btn btn-primary active">
  •         <input type="radio" name="options"> Option 1
  •     </label>
  •     <label class="btn btn-primary">
  •         <input type="radio" name="options"> Option 2
  •     </label>
  •     <label class="btn btn-primary">
  •         <input type="radio" name="options"> Option 3
  •     </label>
  • </div>

Enable Buttons via JavaScript

You may also enable buttons via JavaScript:

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $(".nav-tabs a").click(function(){
  •         $(this).button('loading').delay(500).queue(function(){
  •             $(this).button('reset');
  •             $(this).dequeue();
  •         });        
  •     });
  • });
  • </script>

Options

None


Methods

These are the standard bootstrap's buttons methods:

$().button('toggle')

This method toggles push state of the button. It changes the appearance of the button, and makes it look like that it has been activated. You can also enable auto toggling of a button by using the data-toggle attribute.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("#myButton").click(function(){
  •         $(this).button('toggle');
  •     });
  • });
  • </script>

$().button('loading')

This method sets the button state to loading. When loading, the button is disabled and the text is swapped with the value of data-loading-text attribute of button element.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("#myButton").click(function(){
  •         $(this).button('loading');
  •     });
  • });
  • </script>
 

Note:The use of data-loading-text and $().button('loading') has been deprecated since Bootstrap v3.3.6 and will be removed from v4. You should better use $().button(string) method to ensure future compatibility.

$().button('reset')

This method resets button state by swapping text to original text.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $("#myButton").click(function(){
  •         $(this).button('loading').delay(1000).queue(function(){
  •             $(this).button('reset');
  •             $(this).dequeue();
  •         });        
  •     });
  • });
  • </script>

$().button(string)

This method resets button state by swapping text to any data defined text state.

  • <script type="text/javascript">  
  • $(document).ready(function(){
  •     $("#myButton").click(function(){
  •         $(this).button('loading').delay(1000).queue(function() {
  •             $(this).button('complete');
  •             $(this).dequeue();
  •         });        
  •     });
  • });   
  • </script>
 
Close

Your Feedback:

 

We would love to hear from you! Please say something.