Browse documentation

UI / Foundations / Reference

Alert: urgent messages without moving focus

Announce an urgent text change from an already mounted live region.

Alert supplies role="alert" without moving focus. Mount the region, then update its text for an urgent change; an alert already present at page load may not be announced. Keep a recovery control near a failure rather than placing interactive content in the alert.

import { RefSubject } from "@typed/fx";
import { html } from "@typed/template";
import { Alert } from "@typed/ui/Alert";
import { Button } from "@typed/ui/Button";
import { component } from "@typed/template";

export const UploadStatus = component(function* () {
  const message = yield* RefSubject.make("");

  return html`${Alert({ content: message })}${Button({
    content: "Simulate upload failure",
    onclick: RefSubject.set(message, "Upload failed. Try again."),
  })}`;
});

See the Alert API and the save failure path in building UI components.