Animated React button components
Hold to confirm
Hold to fill, let go to cancel. Finish the hold and it morphs into a confirmed state. Works with Space and Enter too.
Buttons, press and hold, Motion
Install
npm i clsx lucide-react motion tailwind-merge && curl -o components/hold-to-confirm.tsx https://motion-brew.com/r/hold-to-confirm.tsxOne self contained file for React and Tailwind CSS: hold-to-confirm.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { HoldToConfirm } from "@/components/hold-to-confirm";
export default function Page() {
return <HoldToConfirm duration={1200} onConfirm={() => deleteProject()} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Hold to delete" | Label before and during the hold |
| icon | ReactNode | trash icon | Icon before the label, null for none |
| confirmedLabel | ReactNode | "Deleted" | Label after completion |
| duration | number | 1200 | Hold length, ms |
| resetAfter | number | 1600 | Confirmed state length, ms |
| onConfirm | () => void | Called once on completion | |
| fillClassName | string | neutral | Fill color class (near-black, near-white in dark) |
More buttons
- Bell toggle: A pill toggle where a press rings the bell, crossfades the label and unfurls the pill.
- Slide commit: Slide to confirm: drag the handle past the line and it commits with a spinner and a green check; let go early and it springs home.
- Download button: A download pill whose page icon fills up like liquid as the percentage counts, while a waving fill sweeps across, then a check lands on the page.
- Receipt button: A pay button that turns into a receipt printer: progress fill, check draw, line-by-line paper feed and a torn-off receipt.