Toast System Test Page

Individual Variants

Advanced Tests

Expected Behavior

  • Success: Green background (bg-green-50), green border and dot
  • Error: Red background (bg-red-50), red border and dot
  • Info: Orange background (bg-brand/5), orange border and dot
  • Warning: Yellow background (bg-yellow-50), yellow border and dot
  • Positioning: Toasts appear below navbar with dynamic offset
  • Queue: Max 6 visible toasts, "+N more" badge appears when queue overflow
  • Timer: Countdown shows remaining seconds, progress bar animates

Debugging Tips:

  1. Open browser DevTools Console to see debug logs
  2. Check if toast context is available (logged on mount)
  3. Look for toasts in top-center of screen (below navbar)
  4. Toasts should have colored backgrounds and gradient progress bars
  5. Check Network tab if toasts not appearing (JS errors)