# Bottom Progress Toast

> A minimal toast with a thin bottom progress underline in four semantic variants — success, info, warning, and error — each pairing a deep tinted card with a bright accent.

- Category: Toast
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Runway
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: snackbar, notification, progress
- Page: https://builder.atheros.ai/components/bottom-progress
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_bottom_progress/preview-fe100416e38b.webp

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

## Keyboard shortcuts

- `Enter` — Activate theme toggle
- `Space` — Activate theme toggle

## Common questions

**Which frameworks is Bottom Progress Toast available in?**

Bottom Progress 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 Bottom Progress Toast free?**

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

**Does Bottom Progress Toast support dark mode?**

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

## Get the code

Preview Bottom Progress 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/bottom-progress

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