Soft Badge Toasts

Features

• Four semantic variants — success, error, warning, info — each with a square Tabler icon badge and tinted card
• Title/message hierarchy — a 600-weight variant-inked title over a softer supporting message
• Pale tinted fill with a matching accent-mixed border and a variant-tinted layered shadow per variant
• Variant accents prefer the host shell's readable success/error/warning/primary ink variables with alert-palette fallbacks, so the stack retones under any injected design system in light and dark
• Ink-deepened badge fill keeps the icon glyph above the 3:1 WCAG graphics ratio in both themes
• Bottom countdown progress bar on a faint accent track that empties over the lifetime via transform: scaleX(); it dims and holds while paused
• Auto-dismiss after a timeout; pause the timer and progress on hover and keyboard focus
• Stable opacity-only entrance and exit animations keep every toast in place throughout the transition
• Close button with accent-tinted hover, active, and focus-visible states
• Replay trigger re-spawns the full demo set after clearing the visible stack
• Programmatic showToast({ variant, title, message }) API
• Stack capped at five visible toasts; the oldest fades out when the cap is exceeded

Accessibility

Live region

aria-live="polite" role="status" aria-atomic="false" on the toast stack, with aria-atomic="true" per toast so only the new toast is announced

Badge icon

aria-hidden="true" decorative square icon badge

Replay trigger

<button> with an explicit aria-label and visible text label

Focus indicators

:focus-visible with --ring outline on interactive elements

Pause on focus

Auto-dismiss timer pauses while a toast holds keyboard focus

Reduced motion

prefers-reduced-motion: reduce disables all animations

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

Open Soft Badge Toasts 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.