Hold Action Button
A button you press and hold: liquid rises through it, its wave edge rolling, and the action fires when it is full. Let go early and it drains. The liquid takes any colour, such as the weather behind it, and works with the keyboard too.
Install
Steps for Next.js.
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-componentsLoad the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The resting label. |
| onHoldComplete | () => void | — | Called once the liquid fills the button. |
| holdDuration | number | 1600 | How long to hold, in milliseconds. |
| type | "vertical" | "horizontal" | "vertical" | Whether the liquid rises from the bottom or flows in from the side. |
| holdingLabel | ReactNode | "Keep holding" | Shown while held. |
| completeLabel | ReactNode | "Done" | Shown once complete. |
| fillClassName | string | — | Colours the liquid. Set the background and the text colour together: the wave edge is drawn in the text colour. |
| labelClassName | string | — | Classes for the label. |
| className | string | — | Classes for the root element. |