Modus UI

Steady Press

Web (React)

A press-and-hold confirm button that fills from below with a wavy crest.

Steady Press guards a deliberate action: hold it and a primary tint rises with a wave on its crest until the action completes. Letting go early drains it. Mono uppercase label on a secondary surface.

Modus / Steady Press

Installation

CLI

npx @modus-ui/cli add steady-press

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/steady-press.tsx.
  3. Paste the code.

Usage

tsx
import { SteadyPress } from "@/components/ui/steady-press";

export default function Example() {
  return <SteadyPress />;
}

Props

PropTypeDefaultDescription
childrenstring"Hold to publish"Button label.
doneLabelstring"Published"Label shown after a completed hold.
iconanynullOptional leading icon.
doneIconanynullIcon shown after a completed hold.
backgroundColorstring"hsl(var(--secondary))"Button background colour.
fillColorstring"hsl(var(--primary))"Colour of the rising fill.
textColorstring"hsl(var(--secondary-foreground))"Label colour over the background.
fillTextColorstring"hsl(var(--primary-foreground))"Label colour over the fill.
sizestring"md"Button size: "sm", "md" or "lg".
radiusnumber14Corner radius in pixels.
fillDirectionstring"up"Fill direction: "up" or "right".
holdTimenumber2000Hold duration to complete, in milliseconds.
releaseTimenumber200Drain duration after an early release, in milliseconds.
pressScalenumber0.97Scale applied while pressed.
wavebooleantrueDraw a wave on the fill edge.
waveAmplitudenumber6Wave height in pixels.
glowbooleantrueGlow when the hold completes.
resetAfternumber1200Delay before resetting after completion, in milliseconds.
disabledbooleanfalseDisables the button.
onHoldany-Called when the hold completes.
onTapany-Called on a short press.

Comments

  • No comments yet.