DEV Community

Cover image for shadcn/ui Async Button with Loading and Error States
jQueryScript
jQueryScript

Posted on

shadcn/ui Async Button with Loading and Error States

Stateful Button for shadcn/ui: async feedback component with state machine architecture

Key features:

🔄 Spinner and progress bar modes for different async operations

âš¡ XState-powered state transitions between idle, loading, success, and error

♿ Built-in ARIA support with customizable screen reader messages

📦 Installs via shadcn CLI with full source code access

🎨 Works with all shadcn Button variants and sizes

🎯 Promise-based onClick handlers with automatic error handling

Perfect for form submissions, file uploads, and any async action needing user feedback. Ships as TypeScript source code so you can customize everything.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Top comments (0)