A11y Async Button

Addon example

Visible async status

Pair a semantic async button with nearby persistent status text for save, send, and dashboard actions where users need feedback that stays visible after the button label changes.

Quick facts

What this addon covers

Import path
a11y-async-button/addons/status
Pattern
Visible status connector for one async button
Status target
Existing element chosen by selector, description, or parent markup
Runtime deps
None beyond the core package

Live demo

Sync button state to visible text

The addon does not create UI. Each button points at an existing status element and mirrors loading, success, error, and reset state changes into that element.

Save preferences

Ready to save preferences.

Send invite

Ready to send an invite.

Try it

Useful checks

Example code

Import only the status addon

import { createAsyncButtonStatus } from "a11y-async-button/addons/status";
import "a11y-async-button/styles.css";

createAsyncButtonStatus(button, {
  target: "#settings-status",
  loadingStatusText: "Saving preferences...",
  successStatusText: "Preferences saved.",
  errorStatusText: "Preferences could not be saved.",
  onAction: async () => {
    await savePreferences();
  }
});

Accessibility notes

What changes for users

Keyboard and focus

  • The addon keeps native button activation for Enter and Space.
  • Focus stays on the button while the visible status updates.
  • Repeated activation is still controlled by the core async button behavior.

Status output

  • The status element receives role="status", aria-live="polite", and aria-atomic="true" when missing.
  • Custom status text can come from options or data attributes.
  • The addon restores the status element's original text and attributes on destroy.