NEXT: Toasts

[endigo9740]

Warning

This issue is a work in progress.

This will act as a hub to centralize this information.

Framework Status

• Svelte 5: Incomplete
• React: Incomplete

Maintainer Requests

The following requests are coming straight from the Skeleton team. These are highly likely be implemented:

• (see also Modals and Drawers)
• Ability to set up a default timeout for Toasts
• (expect this to expand over time)

Community Requests

The following requests have come from the community and are under consideration:

• "Custom content" toasts #1711

Bugs and Issues

• n/a

Feedback

If you have additional updates or requests for this feature, please do so in the comments section below.

[jwatts777]

Toasts could be more useful with custom event options.
Ex.(tentative)
on:toastDisplay={toastAnimHandle}
on:toastActionBtnClicked={fireActionFunc}
on:dismissBtnClicked={userDoesntWantToast}

[Typogram]

Toast should have custom element for Dismiss button. Allow me to put my own button in the inside Toast, and attach an identifier to designate it as the dismiss button.

All my other close button in my UI system is using a specific svg icon, it bothers me that the close button in Toast looks different.

[endigo9740]

Hey Typograph, I'm expecting us to converge on an API that's the best parts of modals/drawers/toasts, including the potential for serving fully custom components as the toasts if you so choose. One way or another, we'll definitely cover this use case.

[cycle4passion]

I am trying to handle an array of toast, and have them show/dismiss in a staggered fashion...

import { getToastStore, type ToastSettings } from '@skeletonlabs/skeleton';
const toastStore = getToastStore();

let toasts: {message:string, type: 'success'|'error'} = [
  { message: "Toast1", type: "success" },
  { message: "Toast2", type: "error" },
  { message: "Toast3", type: "success" }
];

toasts.forEach((each) => {
  setTimeout(() =>
    toastStore.trigger({
      message: each.message,
      hideDismiss: true,
      background: each.type !== 'error' ? 'variant-filled-success' : 'variant-filled-error'
  } as ToastSettings), 1000);
});
</script>

but they seem to show/hide nearly all at the same time. Stackblitz minimal repro https://stackblitz.com/edit/skeletonlabs-repl-mshrcf?file=src%2Froutes%2F%2Bpage.svelte

[endigo9740]

In v3, we're going to combine modals/drawers/toasts into a unified "overlay system":

• NEXT: Overlay System (modals/drawers/toasts) #2357