Hold Button

For actions that deserve a moment: delete, publish, reset. Releasing early drains the progress, so nothing happens by accident and no dialog needs dismissing.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add hold-button

Usage

Example

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

<HoldButton tone="danger" onConfirm={() => deleteProject(id)}>Delete project</HoldButton>

Source

Installs to components/galactrex/hold-button.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	What the button does.
`onConfirm`	`() => void`	—	Called once the hold completes.
`duration`	`number`	`1200`	Ms the button must be held.
`confirmedLabel`	`ReactNode`	`"Done"`	Label after confirming.
`resetAfter`	`number`	`1800`	Ms before it is ready again; 0 keeps it confirmed.
`tone`	`"default" \| "danger"`	`"default"`	Danger gives it a stronger border.
`disabled`	`boolean`	—	Disables the button.
`className`	`string`	—	Extra classes for the outer element.

Variants

Default. Publish, send, ship.
Danger. Delete or reset, with a stronger border.

Accessibility

Space or Enter held confirms from the keyboard; key repeat is ignored.
A polite live region says when to keep holding and when it is confirmed.

Motion and reduced motion

Progress is a transform-only fill that drains back on early release.
Reduced motion keeps the fill: it is information, not decoration.