design-infraReport a problem or share feedback← Catalog
Secure Purchase Button
curatedfreemicrokit/secure-purchase-button
A purchase button that opens room for a pixel-wave loader, swaps it for a shield once the payment clears, then resets itself.
$
npx shadcn@latest add https://microkit.co/r/secure-purchase-button.jsonOur notes
Stateful pay button: idle → processing (pixel-wave loader opens room beside the label) → secured (shield) → resets, with data-state, aria-busy and an aria-live label; motion-reduce handled. The states advance on setTimeout in the demo — drive them from your real payment promise. Hard-coded colours.- Source
- MicroKit
- Kind
- component
- Categories
- button
- Use as
- recipe — technique you apply to your own markup
- Applies to
- buttonform
- Motion
- on press, state · subtle · css · low cost · respects reduced motion
- Tags
- css, click, stateful, hard-coded-colours
- Licence
- MIT ("MIT License — Copyright (c) 2026 Henrique Barone", github.com/henriquegpb/microkit). README credits note that some interactions are adapted from publicly shared examples and Webflow exports.
- Live demo
- microkit.co
- Docs
- microkit.co
Similar
Compare all 4 →- Popover Formcult-ui/popover-formButton that morphs into a small inline form (feedback, waitlist). Text uses tokens but surfaces are bg-white / dark:bg-[#121212] plus blue accents — swap to bg-popover.
- Success checktransitions/success-checkSpinner → checkmark morph for completed actions.
- Button Stateful Buttonbeui/button-statefulUseful for save/submit flows with loading, success and error states. Wire real async outcomes; keep labels and error handling explicit.