stable 1.0.0

Auto-disable

Double-submit protection in one class: a button.ng-auto-disable disables itself on the first click, with a loading state and aria-busy. Link ng_autoDisableButtons.js.

On click the button gets disabled, is-loading and aria-busy="true" — and stays locked until your code re-enables it (typically when the request resolves). No options, no wrapper.

Live demo

Click Send: it locks instantly. The component has no “unlock”: re-enabling is plain DOM, done by your app when the work is finished. The Re-enable button here runs exactly the three lines below — that's all there is to it:

auto-disable.html

<button type="button" id="ad-demo" class="ng-btn ng-btn-primary ng-auto-disable">
    <i class="ph ph-paper-plane-tilt"></i>&nbsp; Send request
</button>
<button type="button" class="ng-btn ng-btn-mute-outline" data-enable="#ad-demo">
    <i class="ph ph-arrow-counter-clockwise"></i>&nbsp; Re-enable
</button>

re-enable.js — what the Re-enable button does

const btn = document.querySelector('#ad-demo');

btn.disabled = false;
btn.classList.remove('is-loading');
btn.removeAttribute('aria-busy');

With spinner (the classic)

Add a spinner position class (spinner-right / -left / -top / -bottom): in is-loading the button shows a built-in spinner. Click Save — it locks with the spinner, a simulated request resolves after 1.5s and re-enables it:

auto-disable.html

<button type="button" class="ng-btn ng-btn-primary ng-auto-disable spinner-right" data-simulate-request>
    <i class="ph ph-floppy-disk"></i>&nbsp; Save changes
</button>

Re-enabling

The component never re-enables by itself — it cannot know when your work is done:

app.js

// when your request comes back, re-enable explicitly:
button.disabled = false;
button.classList.remove('is-loading');
button.removeAttribute('aria-busy');

Anatomy

ng-auto-disable (on a <button>) is-loading aria-busy spinner-right spinner-left spinner-top spinner-bottom

Reference

Generated from the component source (ng_autoDisableButtons.js).

Component info

Name	`auto-disable`
Type	`js`
Version	`1.0.0`
Status	`stable`
JS	`/assets/js/ng_autoDisableButtons.js`