Toast/Notification Component

Design a toast/notification component that displays temporary messages to users.

R - Requirements

Key Questions:

• Auto-dismiss? (yes, with duration)
• Multiple toasts? (stack, queue, replace)
• Types? (success, error, warning, info)
• Actions? (undo, retry, dismiss)
• Position? (top-right, top-left, bottom-right, bottom-left)

Common Answers:

• Auto-dismiss (3-5 seconds)
• Stack multiple toasts (max 3-5 visible)
• 4 types (success, error, warning, info)
• Optional actions (undo, retry)
• Top-right default position

A - Architecture

Toast Lifecycle:

Toast Stack Architecture:

Architecture Decisions:

• Portal rendering (render outside DOM hierarchy) - Above all content, z-index management
• Queue management (stack, limit visible) - Max 3-5 visible, auto-remove oldest
• Animation system (slide in/out, fade) - Smooth 60fps animations
• Z-index management (above modals) - Highest z-index for notifications

Relevant Content:

• ARIA Live Regions - Screen reader announcements

D - Data Model

State Management:

• Toast queue (array of toasts)
• Visible toasts (max 3-5)
• Dismiss timers (per toast)
• Position state (top-right, etc.)

Toast Structure:

{
  id: string,
  type: 'success' | 'error' | 'warning' | 'info',
  message: string,
  duration: number,
  action?: { label: string, onClick: () => void },
  onDismiss?: () => void
}

I - Interface

Features:

• Toast container (positioned, stacked)
• Toast item (icon, message, action button, close button)
• Progress bar (optional, shows time remaining)
• Animations (slide in, fade out)

Accessibility:

• ARIA live region (aria-live="polite" or "assertive")
• role="alert" for errors
• role="status" for success/info
• Keyboard dismiss (optional, Escape)
• Focus management (don't trap focus)

Relevant Content:

• ARIA Live Regions - Announcements
• Accessible Animations - Motion preferences

O - Optimizations

Performance:

• Lazy render (only render visible toasts)
• Animation performance (transform/opacity, GPU accelerated)
• Memory cleanup (remove dismissed toasts)

UX:

• Smooth animations (60fps slide/fade)
• Pause on hover (extend duration)
• Stack management (limit visible, auto-remove oldest)

Relevant Content:

• Animation Performance - 60fps animations
• Composite Layers - GPU acceleration

Implementation Checklist

• Portal rendering (document.body)
• Toast queue management (stack, limit visible)
• Auto-dismiss timer (3-5 seconds default)
• Pause on hover (extend duration)
• Multiple types (success, error, warning, info)
• Action buttons (undo, retry)
• Position system (top-right, etc.)
• Stack animations (slide in, fade out)
• ARIA live regions (screen reader announcements)
• Progress bar (optional, time remaining)
• Z-index management (above modals)

Common Pitfalls

❌ No ARIA live regions → Screen readers don't announce
✅ Use aria-live="polite" for info, "assertive" for errors

❌ Too many toasts → UI cluttered, poor UX
✅ Limit visible toasts (3-5), auto-remove oldest

❌ No pause on hover → Users miss important messages
✅ Pause timer on hover, resume on mouse leave

❌ Janky animations → Poor UX
✅ Use transform/opacity, GPU acceleration, 60fps