Live demo
Success and error flows
Activate either button. The visible badge mirrors the plugin state while the button text and ARIA state change.
idle
Completes successfully after a short simulated delay.
idle
Moves to error state after a short simulated delay.
Example code
Initialize all matching buttons
import { initAsyncButtons } from "a11y-async-button";
import "a11y-async-button/styles.css";
const instances = initAsyncButtons();
for (const instance of instances) {
instance.element.addEventListener("a11y-async-button:state-change", (event) => {
console.log(event.detail.state);
});
}