A payment button that moves from idle to processing to success, with a spinner, a drawn check and a pop.
npx shadcn@latest add https://hyperblur.dev/r/pay-button.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/pay-button.tsx.
import { PayButton } from "@/components/hyperblur/pay-button"
<PayButton amount="$29.00" brand="visa" onPaid={() => {}} />| Prop | Type | Default | Description |
|---|---|---|---|
| amount | string | required | Price shown on the button, for example "$29.00". |
| label | string | "Pay" | Text before the amount. |
| successLabel | string | "Paid" | Text shown once the payment succeeds. |
| processingMs | number | 1400 | Milliseconds the processing state lasts. |
| resetMs | number | 2400 | Milliseconds before returning to idle after success. Use 0 to stay in the success state. |
| color | string | "#2f7bff" | Button and focus ring color. |
| onPaid | () => void | Called when the processing state ends in success. | |
| disabled | boolean | false | Ignore presses and dim the button. |
| brand | "none" | "visa" | "mastercard" | "pix" | "none" | Draws a small monochrome mark made of simple shapes next to the amount. |
| rounded | number | 9999 | Corner radius in pixels. The default makes a pill. |
| size | "sm" | "md" | "lg" | "md" | Font size and padding preset. |