feat: add isPaused prop to headlessToast for custom progressBars

[sedmedgh]

This critical feature adds an isPaused prop to the headlessToast component in vue-sonner, allowing developers to control custom progress bars in toast notifications. By passing a reactive boolean value, users can pause or resume animations/timers based on interactions like hovering, addressing the library's lack of exposed hover events.
Usage is straightforward: bind isPaused to a state variable in your custom toast props, then apply it to CSS animations (e.g., animation-play-state: paused;) or JS logic for dynamic control.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
vue-sonner	Ready	Preview	Comment	Sep 23, 2025 4:18pm

[4H1R]

First of all thank you for this amazing package and you're work.

This feature is also very beneficial for us. We're using custom progress bar and we really need this property.

I'm wondering when this could be available as a release ?

[rezanil1375]

Thank you for this contribution! 🙌

I’m really in favor of adding the isPaused prop to the headlessToast, because:

It gives users more control over custom progress bars (e.g. pausing on hover), which is something that was missing previously.

The implementation is clean and minimal — only a small change (+3 / −1) — so it doesn’t introduce a lot of surface area for bugs.

It fits with the design philosophy of “headless / unopinionated” — you’re not forcing a particular animation behavior, you’re giving hooks for users to control it themselves.

It addresses a real use-case: people building custom toast progress components often need to pause/resume animations based on user interaction.

One suggestion: it might be good to add a test (or example in the docs) showing how isPaused works with both CSS animations (e.g. animation-play-state) and JS-based timers, just to make sure edge cases are handled. But overall I believe this is a valuable and safe addition. I’d be happy to approve and merge it.

[izadizahra90-byte]

Awesome work on this! Adding the isPaused prop is a really smart move — it gives us way more flexibility with custom progress bars and makes the toast behavior feel smoother overall. Thanks a ton for jumping on this

[farzadweeb]

I’ve encountered this exact problem as well, and it was quite frustrating. Thanks for this PR! Hope it gets merged soon so working with headlessToast becomes easier.

[hkalaei]

Thank you for this contribution! 🚀

I think adding the isPaused prop to headlessToast is a great idea for several reasons:
• It fills a real gap: developers often need to pause/resume custom progress bars on hover or other interactions, and this provides a straightforward hook.
• The implementation is super clean and minimal, which makes it low-risk in terms of maintenance.
• It stays true to the headless/unopinionated philosophy of the library — instead of dictating behavior, it empowers users to control their own.
• It unlocks flexibility for both CSS-based animations (animation-play-state) and JS timers.

One thing I’d love to see in the future is either a small test case or a docs example demonstrating how isPaused works in practice. That would make it even easier for new users to adopt.

Overall, I think this is a solid and valuable addition. 👍 Happy to see it merged!

[fatemehpourkamar]

Great work!
This isPaused prop is exactly what I needed for fine‑grained control over toast animations.
It solves a real gap in the library by making hover‑pause behavior possible without hacks.
Thanks for putting effort into this improvement — it will make the DX much smoother.

[mhkashani]

The new isPaused prop is a fantastic addition. It solves a common use case (pausing on hover) elegantly without adding complexity.
The implementation looks clean and aligns perfectly with the headless philosophy of the library. We've been looking for a way to handle this in our app, and this PR is exactly what we needed.

[guhweb]

I HATE IT!

I spent about 3 hours trying to get this value and nothing worked... Until I realized it hadn't been merged yet -.-

Please approve it for us :P