Hold Button React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import HoldButton from "./HoldButton";

export default function Example() {
  return (
    <HoldButton
      children={"Hold to confirm"}
      completedLabel={"All done"}
      holdDuration={1200}
      resetAfter={2200}
      accentColor={"#d8c3ee"}
      background={"#292330"}
      color={"#eee8f4"}
      disabled={false}
    />
  );
}

Using Hold Button

Use this button for an action where an intentional hold is useful. holdDuration defines the required time and onComplete performs the action.

Provide completedLabel to explain the result. Use disabled while your application cannot accept another action.

Props

Name	Type	Required	Default	Description
children	ReactNode	No	undefined	Button content before completion.
completedLabel	ReactNode	No	"Confirmed"	Content displayed after the hold completes.
holdDuration	number	No	1200	Required hold duration in milliseconds, with a minimum of 100.
onComplete	function	No	undefined	Called once after a full hold. Releasing early or leaving the button cancels.
resetAfter	number	No	2000	Milliseconds before allowing another hold. Zero keeps the completed state.
accentColor	string	No	"#d8c3ee"	Progress fill colour.
background	string	No	"#292330"	Button background.
color	string	No	"#eee8f4"	Button text colour.
disabled	boolean	No	false	Disable holding. Space and Enter support keyboard activation.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.