Design.dev design.dev
UI Component Prompt

Toast Notification Stack

Stacked notifications with auto-dismiss, progress bars, and smooth enter/exit animations. Copy the prompt, paste it, ship it.

Copy → Paste → Ship

Live Preview

Vanilla JS · Zero Dependencies

Click any button to fire a toast notification. Toasts stack vertically, auto-dismiss with a progress bar countdown, and can be manually closed.

The Prompt

Build a toast notification stack system using vanilla HTML, CSS, and JavaScript. No libraries, no frameworks — zero dependencies.

VISUAL DESIGN
- Dark toast cards on a near-black background
- Card style: background rgba(22,22,22,0.95) with backdrop-filter blur(12px), 1px border at rgba(255,255,255,0.08), border-radius 10px
- Box shadow: layered — 0 8px 32px rgba(0,0,0,0.4) outer, 0 2px 8px rgba(0,0,0,0.2) inner
- Four notification types, each with a distinct accent color:
  1. Success — green (#00ff88), checkmark icon
  2. Error — red (#ff6b6b), X-circle icon
  3. Warning — amber (#ffc700), triangle-alert icon
  4. Info — cyan (#00c4ff), info-circle icon
- Each toast has: colored icon (18px), title (13px semibold white), message (12px muted), close button (top-right)
- Auto-dismiss progress bar: 2px tall strip at the bottom of each toast, colored to match the type, shrinks from 100% to 0% width over the duration

LAYOUT
- Toast container anchored to the top-right corner of its parent, 16px inset
- Toasts stack vertically with 10px gap between them
- Maximum width: 360px (or 100% minus 32px on small screens)
- Newest toast appears at the top, older toasts push down
- Maximum 5 visible toasts — oldest auto-dismissed when the limit is exceeded

ANIMATIONS
- Enter: slide in from the right with subtle scale-up — translateX(100%) scale(0.95) to translateX(0) scale(1), 350ms cubic-bezier(0.21, 1.02, 0.73, 1)
- Exit: fade and slide right — opacity to 0, translateX(60%) scale(0.9), then collapse max-height and negative margin to close the gap, 300ms cubic-bezier(0.33, 0, 0.67, 0)
- Progress bar: linear width transition from 100% to 0% over the toast duration

BEHAVIOR
- Default auto-dismiss duration: 5 seconds (configurable per toast)
- Hovering a toast pauses its countdown timer and progress bar
- Clicking the close button dismisses immediately with the exit animation
- Each toast gets a unique ID for programmatic control
- Provide a simple API: toast.show({ type, title, message, duration })
- toast.show() returns the toast ID for later dismissal via toast.dismiss(id)

ACCESSIBILITY
- Toast container: role="log", aria-live="polite", aria-label="Notifications"
- Each toast: role="status"
- Close button: aria-label="Dismiss notification"
- prefers-reduced-motion: skip animations (instant show/hide)
- Focus does not move to toasts — they are non-intrusive

OUTPUT
- Single HTML file with embedded <style> and <script>
- Include demo buttons for each toast type
- Toast stack contained within the page (position absolute, not fixed) for embedding
- Clean, production-grade aesthetic — should feel like a polished SaaS notification system

Anatomy

01

Toast Container

Fixed-position stack anchored to the top-right, holding up to 5 toasts with automatic overflow management.

02

Type Variants

Four distinct types — success, error, warning, info — each with a unique color and icon for instant recognition.

03

Icon System

Inline SVG icons sized at 18px with color inherited from the toast type for consistent visual language.

04

Progress Bar

A 2px countdown strip that visually communicates remaining time before auto-dismiss.

05

Enter Animation

Slide-in from the right with a subtle scale bounce, giving toasts a physical, responsive feel.

06

Exit & Collapse

Two-phase removal: fade-slide out, then collapse height so remaining toasts reflow smoothly.

07

Hover Pause

Hovering a toast freezes its countdown timer and progress bar so users have time to read.

08

Programmatic API

Simple show/dismiss interface returning unique IDs for full control from application code.

Usage Guidelines

Use This When

  • Confirming user actions like form submissions, saves, or deletions with non-blocking feedback
  • Surfacing background events — API responses, sync status, or incoming updates
  • Building SaaS dashboards or admin panels that need a polished notification layer

Not Ideal When

  • The message requires user action — use a modal or inline alert instead
  • Showing inline form validation errors that should appear next to the field
  • Critical destructive confirmations where the user must explicitly acknowledge
Copied to clipboard