Stateful Button for React

A stateful button component designed to integrate seamlessly with shadcn/ui. It extends the standard Button component to elegantly handle asynchronous operations, providing visual feedback for loading/progress, success, and error states. It's perfect for time-consuming operations, including but not limited to file uploads, slow API requests, or data processing, keeping users informed that the task is still running and awaiting completion.

Installation

npx shadcn@latest add https://stateful-button.vercel.app/r/stateful-button.json

Usage

import StatefulButton from '@/components/ui/stateful-button';
<StatefulButton onClick={loading}>Button</StatefulButton>

Examples

The stateful button automatically handles success and error states based on the outcome of the onClick event. If the promise resolves, the button enters a success state; if it rejects, it enters an error state. The "Default" variant examples below demonstrate both scenarios.

Default

Secondary

Destructive

Outline

Ghost