Stateful Button · Live Demo
Buttons that feel alive
Click any button below — watch the loading spinner transition smoothly into a success checkmark, all powered by motion/react.
✉️
01
Contact Form
User submits an enquiry. The button stays disabled while the request is in-flight.
💳
02
Payment Confirmation
Prevents double-charges by locking the button during the payment API call.
Vidyaro Pro · 1 year₹4,999
•••• •••• •••• 4242VISA
🎓
03
Course Enrollment
Enroll a student in a batch — confirms seat reservation server-side.
JEE Mains 2026 — Full Course
Physics · Chemistry · Maths · 500+ lectures
480 seats leftStarts Sep 1
📄
04
File Download
Generates a PDF on the server before streaming it to the client.
📑
JEE Notes — Organic Chemistry
PDF · 3.2 MB · 124 pages
usage.tsx
import { StatefulButton } from "@/components/ui";
// onClick must return a Promise
<StatefulButton onClick={() => submitForm()}>
Save changes
</StatefulButton>
// Custom colour via className
<StatefulButton
onClick={handlePay}
className="bg-emerald-500 hover:ring-emerald-500"
>
Pay ₹4,999
</StatefulButton>Built with
motion/react · Vidyaro UI