Components
Loading preview...
The ProgressButton is a versatile shadcn/ui-based component that enhances the user experience for asynchronous actions like Submit, Pay, or Upload. Unlike a regular button, it provides immediate visual feedback by showing either a spinner or a progress bar after being clicked. It supports customizable labels for loading and success states, giving users clear confirmation of action progress and completion. The progress bar mode is especially useful for longer operations such as file uploads, while the spinner mode fits quick async tasks. With built-in accessibility, smooth animations, and configurable duration, this button helps reduce uncertainty for users during wait times and makes critical interactions feel more responsive and reliable.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/progress-buttonimport { Loader2, Check } from "lucide-react";
import ProgressButton from "@/components/ui/progress-button";
export default function DemoProgressButton() {
return (
<div className="flex gap-6 flex-wrap">
<ProgressButton label="Submit" />
<ProgressButton label="Pay" loadingLabel="Processing Payment" />
<ProgressButton label="Upload" showBar duration={3000} />
</div>
);
}