Create Stateful Buttons In Bootstrap 4 - StatefulJS

StatefulJS is a small jQuery plugin to create a stateful button component (also called ladda button) that is deprecated since Bootstrap v3.3.5 and has been removed in v4.

Stateful button is a type of toggle button that toggles the button state and displays a custom message on the button when clicked/tapped.

A typical use of the stateful button is to shows a loading text on your form submit or ajax loading button and disable it when processing.

How to use it:

1. Load the jquery.stateful.js script after jQuery. Note that the Bootstrap framework is optional. The plugin works with any CSS framework.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.stateful.js"></script>

2. Create a stateful button and define the text to show on the button when toggled.

<button data-loading-text="Custom Loading Text" 
        class="btn btn-primary">
        Click me
</button>

3. Determine the time to wait before resetting the button to its original state. Default: 3000ms.

<button data-loading-text="Custom Loading Text" 
        data-loading-delay="500"
        class="btn btn-primary">
        Click me
</button>

4. Not just buttons, the plugin works with any HTML elements such as spans, divs, links, etc.

<div data-loading-text="Custom Loading Text" 
     data-loading-delay="500"
     class="btn btn-primary">
     Click me
</div>

5. The HTML of the toggled button should be like these:

<button data-loading-text="Custom Loading Text" 
        data-loading-delay="500" 
        class="btn btn-primary disabled" 
        disabled="disabled">
        Click me
</button>

6. Apply your own 'disabled' styles to the stateful button in case you use the plugin without the Bootstrap framework.

.disabled {
  /* styles here */
}

---

This awesome jQuery plugin is developed by thambaru. For more Advanced Usages, please check the demo page or visit the official website.