Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Sonner - Basic Promise Toast
A Sonner promise toast that automatically transitions from loading to success or error based on promise resolution
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Ever built async operations and manually juggled loading, success, and error toasts? This React promise toast handles all three states automatically. Built with Sonner and shadcn/ui, toast.promise watches your promise and updates the toast from loading to success or error based on resolution—perfect for API calls, form submissions, file uploads, data fetching, async operations, or any promise-based action where you want automatic loading feedback without manual state tracking and toast management.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Promise Toast with Data
Promise toast using resolved data in success message
Promise Toast with Error
Promise toast with custom error message formatting
Loading Toast
Standalone loading toast without promise
Toast with Action Button
Toast with action button for interactions
Success Toast
Success notification toast
Error Toast
Error notification toast
Questions you might have
React Sonner - Bottom Right Position
Toast notification positioned at bottom-right corner as default conventional placement for action feedback and routine notifications
React Sonner - Promise Toast with Data
A Sonner promise toast that uses resolved promise data in the success message for personalized feedback