Lab

Toast Notification Library

Interactive demo of the vanilla JS toast library: types, positions, timer bar, click-through links, and custom styling.

← Back to sandbox overview Contact GitHub

Basic toast types

Position options

Advanced features

Stress test

Documentation

showToast({
  text: "Your message here",           // Required
  type: "success",                     // success|error|warning|info|reminder|custom
  position: "top-right",               // top-left|top-right|bottom-left|bottom-right|center
  duration: 3000,
  close: true,
  stopOnFocus: true,
  destination: "https://example.com",
  newWindow: true,
  showTimerBar: true,
  customStyles: {
    background: "#ff6b6b",
    color: "#ffffff",
    icon: "🎉",
    borderRadius: "12px",
    customClass: "my-custom-toast"
  }
});