NEXT: Toast Component

[endigo9740]

Zag Integration

• React: https://zagjs.com/components/react/toast
• Svelte: https://github.com/chakra-ui/zag/tree/main/website/data/snippets/svelte/toast

Maintainer Requests

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

• Should implement all relevant Zag features
• Should aim for feature parity with v2 component
• Consider support for dynamic components for rich media display
• Consider support for progress bars showing display time remaining
• Consider a fixed option to use as a GDPR cookies banner

Community Requests

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

• NEXT: Toasts #2398
• feat: optionally prioritize new toasts #2673

Feedback

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

[endigo9740]

Note that I've followed up with the Zag team regarding a few issues with this component:

1. Currently there's no obvious and/or available type for <Toast> and <ToastProvider> components.
2. There's a visual glitch if you create toasts in multiple positions quickly
3. It's possible to set an action.label (button label), but not currently possible to retrieve it from the template API
4. Finally, the overlap: true option is not working. The Zag docs do not provide the required CSS styles.

Depending on how quickly they respond and what they say, we may have to pause and return to this feature a later time. If they can at least provide the proper types, we can likely build an initial version using a subset of features.

Keep an eye on this post and the PR for further updates.

[endigo9740]

I've talked with the Zag team and they have noted the issues at hand with the Toast component, but my assumption is it won't be a quick turnaround. After reviewing with the Skeleton team, we need a solution for now, so I'm going to pivot to a third party integration using the following:

• React: https://react-hot-toast.com/
• Svelte: https://svelte-french-toast.com/

These seems like fully featured solutions, with tons of options, and support for Tailwind styling.

I'll begin by creating proofs of concept. If that goes well I'll proceed with the full integration guides. The goal being to have these completed before the Beta release next Tuesday.

In the future, we're happy to revisit the Zag component once improvements are in place. If we feel it meets our expectations we may replace our integration guide with that component.

[endigo9740]

On more quick update - the react-hot-toast library is working great. It's super mature and well documented. Feature-wise it seems to do everything we need it to do.

Unfortunately svelte-french-toast isn't quite there. The docs and features are lacking, it's currently using Svelte 4, and the project itself seems all but abandoned. It's not received updates in nearly a year, even though there appears to be a community-led effort to update and maintain it.

For now, we're going to roll our own custom Toast component specifically for Svelte users. This will mirror the Zag APIs in the hopes we can swap it out with the Zag version in a future release. When that happens, it should remain backwards compatible, but receive a plethora of new features. As such, we'll label the current version with a [beta] tag to indicate this one is still in flux and subject to breaking changes.