How to show a toast notification

Photoshop UXP Plugin API
#1

Hi, what is the easiest way to show a toast message in a UXP application?

It looks like one option might be to use the sp-toast tag (https://opensource.adobe.com/spectrum-web-components/components/toast), but it looks like this requires React, which I’m trying to avoid.

#2

UXP doesn’t have a sp-toast component yet, but it’s pretty easy to make one that will do the job. I’m avoiding React here, since you’ve indicated this is something you’re avoiding.

HTML:

<sp-body class="toast" size="s">Temp container</sp-body>

CSS:


.toast {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 8px 16px;
  background-color: rgb(18,128,92);
  color: white;
  display: none;
  border-radius: 4px;
}

.toast.visible {
  display: block;
}

JS:

const toast = document.querySelector(".toast");
toast.onclick = () => {
    toast.classList.remove("visible");
};
function showToast(msg) {
    toast.textContent = msg;
    toast.classList.add("visible");
    setTimeout(() => {
        toast.classList.remove("visible");
    }, 5000);
}

document.querySelector("#toastMe").onclick = evt => {
    showToast("Toast is done");
};

Result:

image
image1210×268 49.5 KB

Note that toasts cannot go outside the panel or dialog.

3 Likes