Toast with Action

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

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

Customise it with AI

Open Toast with Action in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the toast 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.