Toastify JS

Basic Toast

A simple, clean notification toast with default behavior and styling.

Toastify({
  text: "This is a toast",
  duration: 3000
}).showToast();

Success Toast

A success-themed notification featuring a custom gradient background and a close button.

Toastify({
  text: "This is a success toast",
  duration: 3000,
  close: true,
  gravity: "top", // `top` or `bottom`
  position: "right", // `left`, `center` or `right`
  stopOnFocus: true, // Prevents dismissing of toast on hover
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)",
  }
}).showToast();

Error Toast

An error-themed notification with high-contrast styling to alert users about failures.

Toastify({
  text: "This is an error toast",
  duration: 3000,
  close: true,
  gravity: "top",
  position: "right",
  style: {
    background: "linear-gradient(to right, #ff5f6d, #ffc371)",
  }
}).showToast();

Bottom Left

Demonstrates custom positioning logic by placing the toast in the bottom-left corner of the viewport.

Toastify({
  text: "This is a bottom-left toast",
  duration: 3000,
  gravity: "bottom",
  position: "left",
  style: {
    background: "linear-gradient(to right, #0072ff, #00c6ff)",
  }
}).showToast();