Badge Action Toast

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

Customise it with AI

Open Badge Action Toast 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.