Add data-loading-text="Loading..." to use a loading state on a button.
data-loading-text="Loading..."
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.
data-loading-text
$().button('loading')
<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>