# Badge Action Toast

> A stack of notification toasts — each a card with a tinted circular badge, a message, and an inline action button. Four scenarios (message, friend request, file shared, comment) enter at once, auto-dismiss, and respawn when the stack empties. Token-driven and design-system agnostic.

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

## Features

- Four distinct notification variants shown at once — new message (Reply), friend request (Accept), file shared (View), and comment (Reply)
- Each variant carries its own semantic accent — indigo, green, amber, and rose — applied to the circular badge and the inline action label
- A filled circular badge holding a variant-specific Tabler glyph beside the message text
- A trailing text action button that underlines on hover and runs an optional callback before dismissing its toast
- Toasts render on load together (no stagger) with a fade-in entrance
- Auto-dismiss after a timeout with a left-origin progress bar that depletes via `transform: scaleX()`
- Respawn loop — the full set reappears ~700ms after the stack empties so the showcase never goes blank
- Pause the timer and progress on hover and keyboard focus; resume on leave and blur
- Stack capped at four visible toasts
- Dismissing a focused toast moves keyboard focus to the next toast's action, or to the stack when none remain

## Accessibility

- **Live region** — `aria-live="polite"` `role="status"` on the toast stack, so each inserted toast is announced on its own
- **Action button** — Real `<button>` with a variant-specific `aria-label` and visible text
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Pause on focus** — Auto-dismiss timer pauses while a toast holds keyboard focus
- **Focus on dismiss** — Removing a toast that holds focus moves focus to the next toast's action button, or to the stack container
- **Decorative glyphs** — Badge icons and the progress bar marked `aria-hidden="true"`
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations
- **Viewport** — `100dvh` for mobile-safe viewport height

## Keyboard shortcuts

- `Enter` — Activate the focused action button
- `Space` — Activate the focused action button

## Common questions

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

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

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

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

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

## Get the code

Preview Badge Action Toast 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/badge-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