# Progress Button

> 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.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/progress-button

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/progress-button?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt