Add a string close button

[lorraineS]

Hello,

Since it is possible to add a string of characters within the content, it would be nice to also be able to customize the closing button with inline SVG, img tag, etc.

Ex:

Toastify({
  text:
    "<p class='notification-p'>" +
      "Simple Exemple." +
     "</p>",
     duration: 3000,
     close:
       "<svg class='icon' aria-hidden='true'>" +
         "<use xlink:href='assets/icons/icons.svg#favorites'></use>" +
       "</svg>",
}).showToast();

If the close property is mentioned then its value is true. Then we can directly add our HTML markup.

What do you think ?

[apvarun]

I feel this is way too much customization for such a small component. Could you explain the intension behind to understand better?

[silverwind]

Would also prefer a HTML string option on close. I find the default close icon ugly and would like to replace it with a nicer one.

I implemented a custom close icon using custom HTML in text and binding the click handler but would prefer something better supported and not bound to break when the internal api changes. Here's roughly what I've been doing:

const toast = Toastify({
  text: `
    <div class="toast-message">${htmlEscape(message)}</div>
    <div class="toast-close"><svg/></div>
  `,
});

toast.showToast();

toast.toastElement.querySelector('.toast-close').addEventListener('click', () => {
  toast.removeElement(toast.toastElement);
});

[Shaka-60hp]

Would also prefer a HTML string option on close. I find the default close icon ugly and would like to replace it with a nicer one.

I implemented a custom close icon using custom HTML in text and binding the click handler but would prefer something better supported and not bound to break when the internal api changes. Here's roughly what I've been doing:

const toast = Toastify({
  text: `
    <div class="toast-message">${htmlEscape(message)}</div>
    <div class="toast-close"><svg/></div>
  `,
});

toast.showToast();

toast.toastElement.querySelector('.toast-close').addEventListener('click', () => {
  toast.removeElement(toast.toastElement);
});

Got the same thing going on