Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Sonner examples · Promise

Loading Toast Sonner for React

A loading toast with a spinner that stays until you dismiss or update it.

Framework
UI library

toast.loading shows a spinner and a message, and doesn't close on its own. Use it when you control the task yourself and will update or dismiss the toast when it's done; toast.promise does that for you.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What does this loading toast pass?

The button calls toast.loading with "Processing your request...". That sets the type to loading. Toaster shows a spinning Loader2Icon with className="size-4 animate-spin".

Does this loading toast close on its own?

No. A toast whose type is loading skips the auto-close timer. This call does not pass duration, and the file never dismisses it, so the spinner stays up.

How do I clear it when the request finishes?

toast.loading returns an id. This demo ignores that id. Keep it, then pass the same id to toast.success or toast.error to reuse the toast, or pass it to toast.dismiss.

How do I let the toast swap to success or error for me?

Call toast.promise with the promise and loading, success, and error messages. That keeps one toast and replaces the loading line when the promise settles. This demo calls toast.loading only.

Which options does this call pass?

None. The only argument is the message. There is no description, action, or id in this file.

Where is the spinner defined?

On Toaster, as icons.loading. The demo renders its own Toaster beside the button; in an app, render one near the root.

All 24 sonner examples