# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/component/button14. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Components](/components)
3. /
4. [Button](/components/button)
5. /
6. Hold to Confirm Button

# Hold to Confirm Button

A hold to confirm button that fills while held and fires only when the hold completes.

PreviewCode

Hold to deleteDeletedHold to deleteDeleted

## Installation

Adds the component and everything it depends on to your project.

![](https://oud.pics/sm/l/npm.svg)npm![](https://oud.pics/sm/l/bun.svg)bun![](https://oud.pics/sm/l/pnpm.svg)pnpm![](https://oud.pics/sm/l/yarn.svg)yarn

Base UI

`npx shadcn add https://ui.beste.co/component/r-base/button14`

New here? Read the [installation guide](/docs/installation).

## Usage

The import and the props worth knowing about, in one place.

```
import { Button14 } from "@/components/beste/component/button14";
import { LogOut } from "lucide-react";

// onConfirm fires only after the button is held for holdDuration ms.
// Releasing early cancels and snaps the fill back.
<Button14
  label="Hold to delete"
  confirmLabel="Deleted"   // shown once the hold completes
  onConfirm={() => console.log("deleted")}
/>

<Button14
  label="Hold to sign out"
  confirmLabel="Signed out"
  icon={LogOut}        // idle icon (default: Trash2)
  tone="dark"          // "destructive" (default) | "dark" | "primary"
  rounded="md"         // "full" (default) | "lg" | "md" | "none"
  holdDuration={800}   // ms the button must be held
  resetDelay={0}       // 0 keeps the confirmed state (no auto-reset)
  onConfirm={() => console.log("signed out")}
/>
```

## Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

Hold to deleteDeletedHold to deleteDeleted

Usage

```
import { Button14 } from "@/components/beste/component/button14";

<Button14
  label="Hold to delete"
  confirmLabel="Deleted"
/>
```

Props

LabelConfirmed label

Hold duration

ms

Reset delay

ms

Surface

RoundedfullTonedestructive

## Keyboard and gestures

Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.

| Press and hold     | The fill crosses the button over \`holdDuration\`; only when it lands does \`onConfirm\` run. |
| ------------------ | --------------------------------------------------------------------------------------------- |
| Release early      | The fill runs back and nothing is confirmed. That is the whole point of the control.          |
| Space / Enter held | Holds the same way, so the keyboard is not offered a shortcut past the pause.                 |

## Props

Read from the component's own type, so this cannot drift from what it accepts.

| Prop         | Type                    | Default   | Description                                                                         |                                                    |                                  |
| ------------ | ----------------------- | --------- | ----------------------------------------------------------------------------------- | -------------------------------------------------- | -------------------------------- |
| label\*      | string                  | —         | Idle label (e.g. "Hold to delete")                                                  |                                                    |                                  |
| confirmLabel | string                  | —         | Label shown once the hold completes                                                 |                                                    |                                  |
| holdDuration | number                  | —         | How long the button must be held, in ms                                             |                                                    |                                  |
| resetDelay   | number                  | —         | How long the confirmed state is shown before resetting, in ms; 0 disables the reset |                                                    |                                  |
| icon         | LucideIcon              | —         | Leading icon in the idle state (defaults to Trash2)                                 |                                                    |                                  |
| tone         | "destructive" \| "dark" | "primary" | —                                                                                   | Fill tone: destructive (default), dark, or primary |                                  |
| rounded      | "full" \| "lg"          | "md"      | "none"                                                                              | —                                                  | Corner radius (defaults to full) |
| onConfirm    | () => void              | —         | Called once, when the hold completes                                                |                                                    |                                  |
| className    | string                  | —         | Additional classes merged onto the button                                           |                                                    |                                  |

[PreviousLetter Roll Button](/component/button13)[NextExpanding Reveal Button](/component/button15)

On this page
* [Preview](#preview)
* [Installation](#installation)
* [Usage](#usage)
* [Playground](#playground)
* [Keyboard](#keyboard)
* [Props](#props)

## More Button components

[View all Button](/components/button)

[](/component/button3)

Create account

### Async Loading Button

An async loading button that shows a spinner and disables itself while a promise resolves.

[](/component/button7)

Watch showreel2:31

### Play Button

A video play button with a circular play seal, label, and duration for showreels and product demos.

[](/component/button15)

Get in touch

### Expanding Reveal Button

An expanding icon button that reveals its label on hover or focus for compact layouts.

[](/component/button6)

![](https://i.pravatar.cc/64?img=14)![](https://i.pravatar.cc/64?img=33)![](https://i.pravatar.cc/64?img=48)Join 2,400+ members

### Avatar Stack Button

A social proof button with an avatar stack inside the pill and a trailing arrow.

[](/component/button20)

Let's talk

### Magnetic Button

A magnetic button that is pulled toward the cursor on hover and springs back on leave.

[](/component/button1)

Read More

### Seal Arrow Button

An uppercase pill button with a trailing seal arrow chip and an optional link.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.