Quick facts
What this addon covers
- Import path
a11y-async-button/addons/presets- Pattern
- Named option presets for common async actions
- Built-ins
- save, submit, send, delete, upload, download, copy, refresh
- Runtime deps
- None beyond the core package
Live demo
Use named presets for repeated actions
Each button uses data-a11y-async-preset. The JavaScript
supplies only the actual async work and one project-specific
archive preset.
Save settings
Ready to save settings.
Send invite
Ready to send an invite.
Delete draft
Ready to delete the draft.
Archive report
Ready to archive the report.
Try it
Useful checks
- Activate Save settings and watch the preset supply loading and success text.
- Change Send invite or Delete draft to Error, then activate the button.
- Use Tab, Enter, and Space to confirm native button behavior.
- Compare the custom Archive report preset with the built-in action presets.
Example code
Import only the presets addon
import { initAsyncButtonPresets } from "a11y-async-button/addons/presets";
import "a11y-async-button/styles.css";
initAsyncButtonPresets({
presets: {
archive: {
loadingText: "Archiving...",
successText: "Archived",
errorText: "Could not archive",
resetDelay: 2200,
preserveWidth: true
}
},
onAction: async (asyncButton) => {
await runActionFor(asyncButton.element);
}
});Accessibility notes
What changes for users
Keyboard and focus
- Each action stays a real
<button>with native keyboard activation. - Focus remains on the activated button while the preset text changes.
- Repeated activation is blocked by the core async button defaults while work is loading.
Status output
- The preset chooses clear loading, success, and error copy for the action type.
- This demo listens to core state-change events to update visible status text.
- The addon does not run network requests, confirm destructive actions, or create UI.