Alert Box

Preview

<AlertBox variant="info" title="Heads up">
  This is an informational message.
</AlertBox>

Variants

<AlertBox variant="info" title="Heads up">This is an informational message.</AlertBox>
<AlertBox variant="success" title="Saved">Your changes were saved successfully.</AlertBox>
<AlertBox variant="warning" title="Check this">Some fields need your attention.</AlertBox>
<AlertBox variant="danger" title="Error">Something went wrong while saving.</AlertBox>

States

The title is optional — omit it for a compact single-line alert. With dismissable, a close button appears and a dismissed event bubbles on click.

<AlertBox variant="info">A compact, single-line alert with just a message.</AlertBox>
<AlertBox variant="warning" title="Dismiss me" dismissable={true}>Click the × to hide this alert.</AlertBox>

API

Events

Accessibility

It is not a live region, despite the name

An alert box is the component most likely to be injected at runtime, so making it role="alert" by default looks obvious. It is wrong for the general case, for three reasons that compound:

• It takes a slot. Live regions announce raw text with no structure, so a slotted link or button is read as a run-on sentence with no roles. The component cannot see what you put in there.
• dismissable puts a control inside it. A live region does not take focus and cannot be navigated to, so the user is told a button exists and given no route to it. A message with a control in it is a dialog — use esa-dialog.
• Most alert boxes are present at page load, where there is no change for a live region to report — or worse, where some screen readers read it out on load as noise.

So live is opt-in. Turn it on only when all three hold: the box appears in response to something the user did, it is not dismissable, and its slot is plain text. danger then announces assertively (role="alert"); the other variants wait for a pause (role="status"). Combining live with dismissable is ignored and warns in the console.

Everything else

• Icons are auto-mapped per variant (info / circle-check / triangle-alert / circle-alert) and marked aria-hidden.
• The dismiss button has an aria-label="Dismiss".
• Dismissing moves focus to the next focusable element after the box. Hiding the box removes the button that had focus, and without this focus falls to <body> — silently returning a keyboard user to the top of the document.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

No other component reads these — re-point them and esa-alert-box is the only thing that moves.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.