Example Buttons

Stateful

Add data-loading-text="Loading..." to use a loading state on a button.

For the sake of this demonstration, we are using data-loading-text and $().button('loading'), but that's not the only state you can use.

<button type="button" id="myButton" data-loading-text="Loading..." class="slds-button slds-button_brand" autocomplete="off">Loading state</button>
<button type="button" id="myButton" data-loading-text="Loading..." class="slds-button slds-button_neutral" autocomplete="off">Loading state</button>
<button type="button" id="myButton" data-loading-text="Loading..." class="slds-button slds-button_destructive" autocomplete="off">Loading state</button>
<button type="button" id="myButton" data-loading-text="Loading..." class="slds-button slds-button_success" autocomplete="off">Loading state</button>
<script>
    $('.slds-button').on('click', function () {
    console.log('>>>click')
    var $btn = $(this).button('loading').delay(1000).queue(function() {
        $btn.button('reset')
        $(this).dequeue();
    });        
    })
</script>