Hold Button
A hold-to-confirm button — press and keep pressing while ink floods across the label; let go early and it snaps back, hold to the end and it commits with a pop.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/hold-button.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/hold-button.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | — | Button label. |
| onConfirm | () => void | — | Called once when the hold completes. |
| holdMs | number | 900 | How long the press must be held, in ms. |
| confirmedLabel | React.ReactNode | "Confirmed" | Label shown briefly after the hold completes. |
| resetMs | number | 1500 | Ms before the button re-arms after confirming. |
| danger | boolean | false | Destructive styling — red border, label, and ink flood. |
| className | string | — | Additional CSS classes. |