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.
Installation
CLI
npx @modus-ui/cli add steady-pressManual
- Copy the code from the component tab.
- Create a file at
components/ui/steady-press.tsx. - Paste the code.
Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | "Hold to publish" | Button label. |
| doneLabel | string | "Published" | Label shown after a completed hold. |
| icon | any | null | Optional leading icon. |
| doneIcon | any | null | Icon shown after a completed hold. |
| backgroundColor | string | "hsl(var(--secondary))" | Button background colour. |
| fillColor | string | "hsl(var(--primary))" | Colour of the rising fill. |
| textColor | string | "hsl(var(--secondary-foreground))" | Label colour over the background. |
| fillTextColor | string | "hsl(var(--primary-foreground))" | Label colour over the fill. |
| size | string | "md" | Button size: "sm", "md" or "lg". |
| radius | number | 14 | Corner radius in pixels. |
| fillDirection | string | "up" | Fill direction: "up" or "right". |
| holdTime | number | 2000 | Hold duration to complete, in milliseconds. |
| releaseTime | number | 200 | Drain duration after an early release, in milliseconds. |
| pressScale | number | 0.97 | Scale applied while pressed. |
| wave | boolean | true | Draw a wave on the fill edge. |
| waveAmplitude | number | 6 | Wave height in pixels. |
| glow | boolean | true | Glow when the hold completes. |
| resetAfter | number | 1200 | Delay before resetting after completion, in milliseconds. |
| disabled | boolean | false | Disables the button. |
| onHold | any | - | Called when the hold completes. |
| onTap | any | - | Called on a short press. |
Comments