Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Loading Toast
A standalone Sonner loading toast for manual loading states without automatic promise tracking
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Sometimes you need manual control over loading states—toast.promise is too automatic. This React loading toast gives you that control. Built with Sonner and shadcn/ui, toast.loading shows a persistent loading indicator—perfect for multi-step processes, complex workflows, manual state management, operations with multiple promises, progress tracking, or any async operation where you want to manually dismiss the loading state instead of automatic promise-based transitions and need finer control over when loading starts and stops.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Basic Promise Toast
Automatic promise-based loading transitions
Promise Toast with Data
Promise toast with data in success message
Non-Dismissible Toast
Toast requiring interaction to close
Spinner
Loading spinner component
Skeleton
Skeleton loading placeholder
Progress
Progress bar component