Toggle Sidebar B
AppearanceLight & dark mode D
Hold Button
Hold-to-confirm button whose liquid fill rises while pressed, snaps back on an early release and swaps its label through a blur when the hold completes.
Default
Press and hold the button, with the pointer or with Space or Enter. Releasing early snaps the fill back.
API Reference
HoldButton
| Prop | Type | Default | Description |
|---|---|---|---|
doneLabel | string | 'Deleted' | Label that blurs in when the hold completes. |
backgroundColor | string | '#27272a' | Button body colour. |
fillColor | string | '#5227FF' | Colour of the liquid fill, its wave, the glow and the focus ring. |
textColor | string | '#f5f5f5' | Label colour outside the fill. |
fillTextColor | string | '#ffffff' | Label colour inside the fill. The ink inverts as the edge crosses it. |
size | 'sm' | 'md' | 'lg' | 'md' | Height, padding and font size preset. |
radius | number | 14 | Corner radius in pixels of the body, the fill and the focus ring. |
fillDirection | 'right' | 'up' | 'right' | Whether the liquid sweeps left to right or rises from the bottom. |
holdTime | number | 2000 | How long the press must last, in milliseconds. The fill moves at constant speed. |
releaseTime | number | 200 | How fast the fill snaps back on an early release or a reset, in milliseconds. |
pressScale | number | 0.97 | Squash of the button while a pointer holds it. 1 disables it. |
wave | boolean | true | Scrolling meniscus on the leading edge of the fill. |
waveAmplitude | number | 6 | Height of the wave crests in pixels. |
glow | boolean | true | Glow that charges with the hold and pulses once on completion. |
resetAfter | number | 1200 | Milliseconds the done state stays before the button resets. 0 keeps it done. |
disabled | boolean | false | Dims the button and ignores input. |
| Event | Description |
|---|---|
hold | Emitted once, on the frame the fill completes. |
tap | Emitted on a release shorter than 250ms that did not drift away. |
| Slot | Description |
|---|---|
default | Label shown while idle and holding. Defaults to "Hold to delete". |
icon | Optional icon rendered before the idle label. |
done-icon | Optional icon rendered before the done label. |
Accessibility
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Space + Enter | Hold to fill the button. Release early to cancel. |
| Escape | Cancels a hold started with the keyboard. |
- A visually hidden hint, linked with aria-describedby, tells screen reader users how long to hold.
- With prefers-reduced-motion the wave and the squash are dropped and the fill fades in instead of sweeping.