Alert Triggers

Features

• A responsive grid of nine icon trigger tiles above an initially empty alert stack
• Clicking a trigger clones its alert template into the live stack and animates the modal in
• Each trigger maps one-to-one to one alert variant via a data-alert id
• Active triggers ring and tint in their variant hue while their alert is visible
• A visible modal backdrop isolates the active alert while the trigger grid is inert
• Backdrop clicks, Escape, dismiss buttons, and dismiss links close the alert
• Keyboard focus stays inside the modal and returns to its trigger after dismissal
• Triggers reset automatically when their alert leaves the stack, tracked by a MutationObserver
• Two layout families: multi-line block alerts and single-row inline alerts
• Block alerts carry a colored left-accent bar in the variant hue
• Inline alerts use a tinted full background with a leading icon and trailing action
• Every alert keeps a 44px dismiss control anchored to its top-right corner without overlapping long titles
• Filled round badge icons built from a CSS disc plus a white Tabler glyph
• Neutral, violet, amber, green, blue, and red semantic color families
• Error alerts announce with role="alert"; informational alerts use role="status"
• The modal stack exposes aria-modal="true" and aria-live="polite" for assistive technology
• Decorative icons are hidden from assistive technology with aria-hidden
• Responsive grid that changes from three spacious tiles to compact two-column trigger rows
• Fully respects prefers-reduced-motion

Accessibility

Trigger tiles

Native <button> with aria-pressed reflecting whether the alert is shown

Live region

Stack uses role="region", aria-label, and aria-live="polite"

Error alerts

role="alert" on the submission and crash alerts

Status alerts

role="status" on the informational alerts

Dismiss buttons

44px icon-only <button> with explicit aria-label="Dismiss", absolutely anchored at the alert's top-right

Action buttons

Native <button> and <a> with visible text content

Decorative icons

aria-hidden="true" on all trigger, badge, and status SVGs

Focus indicators

:focus-visible with --ring outline on tiles, buttons, and links

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Alert Triggers in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the alert is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.