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

• 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".
• For time-sensitive alerts, wrap in a live region (role="alert" / aria-live) at the call site so screen readers announce it.

Theming surface

Every public token this component reads, extracted from its source at build time. 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.