Back to Alerts & Toasts
Progress Toast
A toast that tracks a long-running operation's completion percentage with a live progress bar, instead of a spinner.
brand-guidelines.pdf
0%Uploading…
Alerts & Toaststoastnotificationprogressupload
Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.
Dependencies: lucide-react
Overview
Layout
Filename + percentage row + progress bar beneath
Color
bg-foreground/60 fill — neutral, tracks completion not severity
Lifetime
No auto-dismiss until progress reaches 100%
Accessibility
role="progressbar" with live valuenow, not re-announced every tick