Hold ButtonFreev1.0.0

For actions that shouldn't happen by accident: press and keep holding until twelve cells fill. Only a full, unbroken hold confirms; let go early and it drains and tells you what's needed. A promise from onConfirm shows it working, then done.

Built on shadcn/ui

.md

Base UIpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/lumen-hold-button.json

Radixpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-hold-button.json

Free, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.

Hold for

Usage

Import it and pass your content. The props that matter most are listed next.

Example

import { HoldButton } from "@/components/ui/lumen/controls/hold-button";

<HoldButton icon="trash" onConfirm={() => deleteFile(id)} doneLabel="Deleted">
  Hold to delete
</HoldButton>

Props

motion"full"
"full" | "subtle" | "off"
As on Button: subtle is shorter on a calm curve; off is instant. Reduced motion is respected automatically.
onConfirm–
() => unknown
Runs after a full hold. Return a promise to show it working; a rejection shows errorLabel.
children–
ReactNode
The label, such as "Hold to delete".
holdMs1200
number
How long the hold takes.
doneLabel / errorLabel"Done" / "Try again"
string / ReactNode
After the work finishes.
holdingLabel / hintLabel"Keep holding" / "Press and hold to confirm"
string
While held, and for a moment after letting go too early (also the spoken description).

Show all 8 props

variant / size / icon"destructive"
Button props
As on Button.
onError–
(error) => void
Receives the failure.

Source

components/ui/lumen/controls/hold-button.tsx

Actions Lumen Halo

Hold ButtonFreev1.0.0

Built on shadcn/ui

.md

Add to your project

Base UIpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/lumen-hold-button.json

Radixpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-hold-button.json

Preview

Hold for

Customize

Try Lumen in your brand. The preview follows on every page; copy the CSS when it's right.

Accent

Charts

Corners

Font

/* Lumen as drawn: nothing to change. */

Props

motion"full"
"full" | "subtle" | "off"
As on Button: subtle is shorter on a calm curve; off is instant. Reduced motion is respected automatically.
onConfirm–
() => unknown
Runs after a full hold. Return a promise to show it working; a rejection shows errorLabel.
children–
ReactNode
The label, such as "Hold to delete".
holdMs1200
number
How long the hold takes.
doneLabel / errorLabel"Done" / "Try again"
string / ReactNode
After the work finishes.
holdingLabel / hintLabel"Keep holding" / "Press and hold to confirm"
string
While held, and for a moment after letting go too early (also the spoken description).