KokonutUI Logo

BT-05ButtonsUpdated, October 16, 2026

Hold Button

Press and hold to confirm, with a fill that drains back on early release and a drawn check on completion.

Install with
class-variance-authority, lucide-react, motion

PROPay Button and more like it are in Kokonut UI Pro

Installation

Hold Button is a free, open-source React component in the Kokonut UI Buttons collection. Add it with the shadcn CLI, which copies the source into components/kokonutui/hold-button.tsx, so the code is yours to change.

npx shadcn@latest add @kokonutui/hold-button

Usage

import HoldButton from "@/components/kokonutui/hold-button";

export default function Example() {
  return <HoldButton />;
}

Dependencies

Built with React, Tailwind CSS, class-variance-authority, lucide-react and motion.

On this page

No Headings