# Toast with Action

> Four telegraph dispatch-slip toasts with mono routing stubs, clear status messages, contextual View and Open actions, and dismiss controls. Irreversible events do not expose misleading Undo actions.

- Category: Toast
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Vector
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: notification
- Page: https://builder.atheros.ai/components/toast-action
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_toast_action/preview-e5128b01bb2b.webp

## Features

- Telegraph dispatch identity: every toast is a paper slip on a ruled manila desk — squared corners, walnut frame, hard offset shadow, Special Elite typewriter titles, IBM Plex Mono teletype stubs and copy
- Four dispatch slips render together on load: file deleted and email sent are informational, while message archived (View) and draft saved (Open) expose valid contextual actions
- Each slip carries a mono routing stub — `Wire TX-01 · HH:MM` with the live spawn time — across a perforated dashed tear line
- Status is communicated directly through the title, message, and semantic icon without redundant badge labels
- Toast entries are defined in a `TA_TOASTS` data array — icon, wire number, stamp word, title, message, action label, and outcome announcement per entry
- Icons come from a Tabler registry (`trash`, `archive`, `device-floppy`, `send`), each rendered in a squared frame tinted with the slip's semantic ink, top-aligned with the title
- The action button sits in a reply-coupon cell behind a vertical dashed perforation, styled as an uppercase mono coupon with guaranteed theme text over a semantic green tint and a springy `scale(0.97)` press
- Clicking a slip's action or close button dismisses only that slip with the slide-down exit animation
- When the last slip is dismissed, a fresh set respawns after 700ms, so the showcase never stays blank
- Every dismissal announces its outcome through a visually-hidden `aria-live` region
- Slips stack vertically and slide up into place with a slight rotation settle using `transform`
- Dark mode is a lamplit night desk — warm charcoal paper and brightened stamp inks via dedicated `--color-night-*` and `--color-*-night` tokens

## Accessibility

- **Live announcements** — Visually-hidden `aria-live="polite"` region announces every outcome
- **Toast role** — `role="status"` on each slip
- **Region landmark** — `role="region"` with `aria-label="Notifications"`
- **Action labelling** — Coupon and close buttons carry descriptive `aria-label`s
- **Stamp readability** — Stamp words are sentence-case text uppercased via CSS, so screen readers announce words, not spelled-out letters
- **Focus indicators** — `:focus-visible` uses a 3:1+ `--ta-focus-ring` derived from primary and text, plus the design-system `--ring` as a soft outer halo
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `Enter` — Activate the focused coupon or close button
- `Space` — Activate the focused coupon or close button
- `Tab` — Move focus between coupon actions and close buttons
- `Escape` — Dismiss the most recent slip

## Common questions

**Which frameworks is Toast with Action available in?**

Toast with Action 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 Toast with Action free?**

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

**Does Toast with Action support dark mode?**

Yes. Toast with Action ships light and dark themes, both drawn from the Vector design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Toast with Action 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/toast-action

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