Custom toast breaks infinite duration

Author: sjk0-9Created Apr 18, 2022Updated May 20, 2026
Labelsbug

For normal loading toasts:

javascript
toast.loading('Loading', { id: 'loading' });
await someProcess();
toast.success('Done', { id: 'loading' });

It behaves as expected, the toast displays "loading" and the spinner for the duration of someProcess and then "done" is displayed for the default 2 seconds, before disappearing.

If I want to use custom toasts. I've got to manually set duration like so:

javascript
toast.custom(<div>Loading</div>, { id: 'loading', duration: Infinity });
await someProcess();
toast.success('Done', { id: 'loading' });

And in this case, the "success" toast appears, but doesn't disappear as expected. Even if I manually specify duration in the success toast's options, it still doesn't work. The only workaround I've managed is using toast.dismiss() after calling success like so:

javascript
toast.custom(<div>Loading</div>, { id: 'loading', duration: Infinity });
await someProcess();
toast.success('Done', { id: 'loading' });
setTimeout(toast.dismiss('loading'));

Not a major deal breaker but not ideal.

Otherwise, loving the library. Thanks for the great work.

Source: timolins/react-hot-toast