1 variant

Hold Button

Name: easeUI Pro
Price: 99.00 USD

A button you press and hold to confirm, for delete or publish. A fill grows behind the label and drains back if you let go early.

Press and hold. Let go early and it drains back.

usage.tsx

import { HoldButton } from "@/components/registry/hold-button";

export function DangerZone() {
  return <HoldButton doneLabel="Deleted" onConfirm={deleteProject}>Delete project</HoldButton>;
}

"use client";

import { Check } from "lucide-react";
import { useAnimate } from "motion/react";
import { type KeyboardEvent, type ReactNode, useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface HoldButtonProps {
  children: ReactNode;
  /** Shown for a moment once it goes through. Default "Done". */
  doneLabel?: ReactNode;
  /** How long to hold, in ms. Default 1200. */

122 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/hold-button