Toast notification

Slides in from the bottom — success, error, and info variants.

✓ Changes saved successfully

Widely Supported

uianimation

Quick implementation

.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 1000;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background: oklch(0.22 0.02 260);
  border: 1px solid oklch(0.30 0.02 260);
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px oklch(0 0 0 / 0.2);
  font-size: 0.85rem;
  color: oklch(0.93 0.01 260);
  animation: toast-in 0.3s ease-out;
}

.toast--success { border-left: 3px solid oklch(0.65 0.2 145); }
.toast--error   { border-left: 3px solid oklch(0.60 0.22 25); }
.toast--info    { border-left: 3px solid oklch(0.72 0.19 265); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer building a notification system.

Goal: A toast notification that slides in from the bottom-right with variants for success, error, and info.

Technical constraints:
- Container: fixed position, bottom-right, z-index: 1000.
- Each toast: slide-in animation using translateY + opacity.
- Variants: color-coded left border (green for success, red for error, blue for info).
- Use oklch() for all colors, not hex or rgba().
- Include prefers-reduced-motion: reduce to disable animation.

Framework variant (pick one):
A) Vanilla HTML + CSS + minimal JS for adding/removing toasts.
B) React component — accept message, variant, duration, and onClose props.

Edge cases to handle:
- Multiple toasts should stack vertically with gap.
- Auto-dismiss after a configurable duration (typically 5 seconds).
- Screen readers should announce toasts via aria-live="polite" or role="status".

Return HTML + CSS.

Why this matters in 2026

Toast notifications give users non-blocking feedback — confirmation that an action worked, a warning about an error, or a heads-up about system state. The CSS handles appearance and animation; JavaScript only manages adding and removing toasts from the DOM.

The logic

A fixed container in the bottom-right corner holds all toasts. Each toast enters with a @keyframes animation that transitions opacity and translateY. Variants use a colored border-left for quick visual identification — green for success, red for error, blue for info. The container uses flex-direction: column with gap so multiple toasts stack cleanly.

Accessibility & performance

Toast containers should use aria-live="polite" so screen readers announce new notifications without interrupting the user. Respect prefers-reduced-motion by disabling the slide animation. Auto-dismiss timers should be generous (at least 5 seconds) to give users time to read the message. Never use toasts for critical actions — use a dialog instead.