Bottom Progress Toast

Features

• Programmatic showToast({ variant, message }) API with four semantic variants: success, info, warning, error
• Each variant pairs a deep colour-tinted card with a bright pastel accent for icon, message, and underline
• Per-variant filled Tabler icons (circle-check, info-circle, alert-triangle, circle-x) injected via a JS registry
• Presents the full 4-variant set together on load — no triggers or page chrome, just the toasts
• Continuous showcase loop — a MutationObserver respawns the set 700ms after the stack empties
• Thin bottom progress underline animated via transform: scaleX() counting down to dismiss
• Stable opacity-only entrance and exit animations keep every toast in place throughout the transition
• Auto-dismiss after a fixed timeout; pause on hover and keyboard focus, resume on leave and blur
• Stack capped at four visible toasts; the oldest is dismissed past the cap
• Sliding sun/moon pill theme toggle in a fixed top-right toolbar with localStorage persistence and prefers-color-scheme default

Accessibility

Live region

aria-live="polite" role="status" aria-atomic="true" on the toast stack

Theme toggle

role="switch" with aria-checked kept in sync by JS, tabindex="0", Enter/Space activation

Focus indicators

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

Pause on focus

Auto-dismiss timer pauses while a toast holds keyboard focus

Reduced motion

prefers-reduced-motion: reduce disables all animations

Color-scheme default

First visit honours prefers-color-scheme: dark

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

Open Bottom Progress 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.