AI Alert Generator.

Create an inline alert component with four severities — info in blue with a circle icon, success in green with a check, warning in amber with a triangle, error in red with an octagon. Each is full width within its container with a 4px left accent bar in the severity color, a background tinted to roughly 8% of that color, 16px padding, an 8px radius, and a 20px icon aligned to the first text line rather than vertically centered. Render a semibold 15px title with an optional 14px muted description below. Because the alert renders with the page rather than appearing dynamically, use role="region" with an aria-label naming the severity, not role="alert" — an assertive live region on initial paint talks over everything else. Check every tinted background against its text color for 4.5:1 contrast.

Add an opt-in dismiss control to an inline alert: a 32px icon button on the right with aria-label="Dismiss" and a visible focus ring, rendered only when a dismissible prop is passed so permanent alerts cannot be closed by accident. On dismiss, remove the alert from the DOM and move focus to the next focusable element after it rather than leaving focus on a detached node. Animate the collapse with height and opacity over 150ms, and skip the animation entirely under prefers-reduced-motion. Accept an onDismiss callback so the caller can persist the dismissal, and document that the alert should reappear on the next session while the underlying condition is unresolved.

Create an alert variant with a single inline action below the description, rendered in the severity color as a text link with an underline on hover and focus. Keep it to exactly one action so the next step is unambiguous, and require concrete wording in the label — "Update payment method", not "Learn more". If the action navigates, use an anchor; if it mutates state, use a button, and show an inline pending state on the button rather than replacing the alert while the request is in flight. Place the action inside the alert region so its purpose is announced together with the message, and keep its hit area at least 44px tall on touch.

Create a compact single-line alert for form-field errors: 13px text in the error color with a 14px inline icon, no title, no accent bar and no background tint, sitting 6px below its input with no vertical margin collapse. Give it a stable ID and reference it from the input with aria-describedby, and set aria-invalid="true" on the input at the same time. Because the message appears in response to a submit attempt, wrap it in role="alert" so it is announced immediately — but render the element only when there is an error rather than keeping an empty live region in the DOM, or the first error will be announced as a change to existing content. Reserve the line height so the layout does not jump when the message appears.

Create a full-width alert banner that mounts above the application shell: edge-to-edge tinted background, centered content capped at the app container width, a 16px icon, one line of text and a single inline action, at 44px total height. Because it displaces the layout, expose its height as a CSS custom property on the root element so a sticky header can offset itself instead of being covered. Support a dismissible mode that persists to localStorage keyed by banner ID and version, so editing the message re-shows it to users who dismissed the previous one. Use role="region" with an aria-label rather than role="alert", since the banner is present on load and should not interrupt.

Create a validation summary alert for the top of a form: an error-severity block with a title stating the count — "3 fields need attention" — and an unordered list of links, each labelled with the field name plus the specific problem, each jumping to and focusing its input on click. Render it only after a submit attempt fails, give it role="alert" and move keyboard focus to the alert container itself with tabindex="-1" so a screen reader user lands on the summary rather than hunting for it. Rebuild the list on every failed submit and re-announce even when the set of errors is unchanged. Pair it with per-field messages wired through aria-describedby rather than replacing them.