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)