# Alert Triggers

> An interactive notification gallery — a grid of nine icon triggers opens block and inline alerts in a focused modal layer with a clear backdrop, predictable dismissal, and restored trigger focus.

- Category: Alert
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Triangulum
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: feedback, notification, interactive
- Page: https://builder.atheros.ai/components/alert-triggers
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_alert_triggers/preview-3405a03dbe16.webp

## 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

## Keyboard shortcuts

- `Tab` — Move focus between the triggers and alert actions
- `Enter` — Activate the focused trigger, button, or link
- `Space` — Activate the focused trigger or button

## Common questions

**Which frameworks is Alert Triggers available in?**

Alert Triggers ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Alert Triggers free?**

Alert Triggers is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Alert Triggers support dark mode?**

Yes. Alert Triggers ships light and dark themes, both drawn from the Triangulum design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Alert Triggers live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/alert-triggers

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt