The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="controls">
  <button class="btn" data-type="success" data-message="Changes saved successfully">Show success</button>
  <button class="btn outline" data-type="error" data-message="Something went wrong. Try again.">Show error</button>
</div>
<div class="toasts" id="toasts" role="status" aria-live="polite"></div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create a toast notification system with HTML, CSS and vanilla JavaScript (no libraries).

Requirements:
- A fixed container in the bottom-right corner (20px from the edges, max width 320px) with role="status" and aria-live="polite" so screen readers announce new toasts.
- A function showToast(message, type) that creates a toast element, appends it to the container, and removes it after 3 seconds.
- Toast style: navy #002057 background, white text, 12px radius, soft shadow, with a 10px status dot - green #34d399 for success, red #f87171 for error.
- Entry animation: fade in while sliding up 16px and scaling from 0.96 (0.35s). Exit animation: fade out while sliding right 24px (0.3s); remove the element on animationend.
- Set the message with textContent, not innerHTML, to avoid HTML injection.
- Demo: two buttons, "Show success" and "Show error", that read their message and type from data attributes and call showToast.

Return a single HTML file with <style> and <script> tags.

How to build it, step by step

1. 1

   Create a fixed container in a corner and make it an ARIA live region so assistive technology announces each toast.

2. 2

   Write a showToast function that builds the toast with createElement and textContent. Avoid innerHTML with dynamic text.

3. 3

   Animate the toast in with a keyframe animation on the element itself; it runs automatically when the element is added.

4. 4

   After a timeout, add a 'leaving' class that plays the exit animation, then remove the element when animationend fires.

5. 5

   Stack multiple toasts with a grid gap on the container.

Customisation tips

• Use role='alert' (assertive) only for urgent errors; 'status' is right for confirmations.
• Pause the dismiss timer while the toast is hovered so users can finish reading.
• Cap the number of visible toasts at three and queue the rest.

More components