Hold Button

A button that requires holding to confirm an action, with visual feedback and a completed state.

Installation

terminal

pnpm dlx layro-cli add @kokonut-labs/hold-button

npx layro-cli add @kokonut-labs/hold-button

npx layro-cli add @kokonut-labs/hold-button

bunx layro-cli add @kokonut-labs/hold-button

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

/**
 * @author: @dorianbaffier
 * @description: Hold Button
 * @version: 2.0.0
 * @date: 2026-10-16
 * @license: MIT
 * @website: https://kokonutui.com
 * @github: https://github.com/kokonut-labs/kokonutui
 *
 * Press and hold to confirm. The fill tracks the hold, drains back at a speed
 * that matches how far it got when released early, and on completion the
 * button turns solid and the label rolls to a drawn check.