UI foundations

dd-button provides the 44px target; add dd-primary for emphasis. Keep icon-only controls named. A toggle retains its label and changes aria-pressed. Set disabled and aria-busy during a request, announce the result outside the button. The opt-in createButtonLoading helper runs an async task with an abort signal, blocks repeat clicks and restores the button after success or failure. Reset cancels this simulated request; navigation and toggle buttons never enter loading automatically.

<button type="button" class="dd-button dd-primary">Save</button>
<button type="button" class="dd-button" disabled>Deploy</button>
<button type="button" class="dd-button"
  aria-label="Pin example" aria-pressed="false">…</button>
<p role="status"></p>

<button id="save" type="button" class="dd-button dd-primary"
  data-loading-label="Saving…">
  <span data-button-spinner hidden aria-hidden="true"
    class="h-4 w-4 shrink-0 rounded-full border-2 border-current border-r-transparent motion-safe:animate-spin"></span>
  <span data-button-label>Save</span>
</button>
<p id="save-status" role="status"></p>

import { createButtonLoading } from './src/theme/ts/button-loading';
const button = document.querySelector('#save');
const status = document.querySelector('#save-status');
const loading = createButtonLoading(button);
button.addEventListener('click', async () => {
  if (loading.busy) return;
  status.textContent = 'Saving…';
  try {
    // Replace persistChanges with your own async operation.
    const completed = await loading.run(signal => persistChanges(signal));
    if (completed) status.textContent = 'Saved.';
  } catch {
    status.textContent = 'Could not save. Please try again.';
  }
});
// loading.reset() aborts the signal and restores the button.
// Respect that signal in your task; cancellation cannot undo saved work.

Use an empty image alternative when the adjacent name identifies the person. Initials are a manually supplied fallback, not an automatic error handler. dd-status adds a decorative dot; the text conveys the state. The photo presence indicator sits in the bottom-right corner with a surface-colored separating ring. Always pair it with readable presence text; presence and account access are separate states.

<span class="relative shrink-0">
  <img src="./images/jamie-davis.jpg" alt=""
    width="44" height="44" class="h-11 w-11 rounded-md object-cover">
  <span aria-hidden="true" class="absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded-full border-2 border-surface bg-success"></span>
</span>
<span>Jamie Davis</span>
<span>Online</span>
<!-- For away or offline use bg-warning or bg-muted AND update the text. -->

Use a polite status for completion and an alert for urgent errors. Keep live regions in the DOM before updating their text. Static notices need no live-region role. This example has no toast queue or notification service.

<p role="status" class="text-sm text-success"></p>
<p role="alert" class="text-sm text-warning"></p>