Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Alert Dialog examples · Custom Actions

Actions with Loading State Alert Dialog for React

An alert dialog with file details whose download action shows a spinner until the file is ready.

Framework
UI library

Before a sensitive download, people want to know what they're getting, and while it runs they want to see it working. This React alert dialog shows the file's size and format in a muted panel, then turns Download File into a spinner until the work is done and closes itself. It's shadcn.io's Alert Dialog on Base UI with the button's isLoading state.

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

How does the spinner work?

The Download File button sets isLoading while the download runs, which shows a spinner and disables it. The demo fakes the work with a timer; replace it with your request.

How does the dialog close when the download finishes?

Its open state is controlled, and the handler sets it to closed once the work settles. Pass open and onOpenChange.

What details should a download dialog show?

What helps people decide: size, format, and anything sensitive about the file. Two to four facts in a bg-muted panel, as label and value pairs, are enough.

Can people cancel while it's downloading?

AlertDialogCancel stays enabled and closes the dialog. If your download can be aborted, abort it when the dialog closes, for example with an AbortController.

How should I handle a failed download?

Keep the dialog open, clear the loading state and show the error inline, for example with an Alert, so people can retry or cancel.

Should I show progress for large files?

For long downloads, yes: add a Progress bar fed by your download's progress events. A spinner is enough for files that take a second or two.

All 39 alert dialog examples