Fieldbook
Sign in

Buttons

Hold to delete

A destructive button that only fires after the pointer is held down long enough for a fill bar to sweep across it, and rewinds the moment you let go.

Using Hold to delete

A destructive button that only fires after the pointer is held down long enough for a fill bar to sweep across it, and rewinds the moment you let go.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: label, holdMs, accent, showCountdown, glyph

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

Hold ring confirm
1707Hold ring confirmButtonsA round button ringed by a stroke that draws itself while you hold, feeding one progress value into the ring, the button scale and the label color at once.
Copy flick tile
2590Copy flick tileButtonsA square tile holding a stack of two pages; a long press flicks the top page away, confirms the copy in the caption, then resets the stack.
Destructive sweep button
2696Destructive sweep buttonButtonsA delete action whose rose to crimson shading sweeps end to end on hover, tipping the bin lid, with an optional hold to confirm line along the bottom edge.
Hold to fill pad
2570Hold to fill padButtonsA translucent pad that fills upward from its base for as long as it is held, then commits and flashes its border when the fill reaches the top.
Icon takeover delete
2628Icon takeover deleteButtonsA destructive button split into a bold word and a narrow icon cell; hovering or focusing grows the cell across the whole button until only the glyph remains, with a two-tap confirm on touch.
Send flight button
2724Send flight buttonButtonsA brushed light button that plays a short send sequence: the paper glyph flies off, a sending label counts its dots, then a check drops in.