Buttons

Hold to fill pad

A 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.

Hold to fill

Press and hold to commit. Release early and the fill drains away. Space or Enter work too.

Using Hold to fill pad

A 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.

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: accent, borderTint, label, holdSeconds, sink

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 preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

1636Hold to deleteButtonsA 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.

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.

2626Diagonal orb fill buttonButtonsOne oversized circle slides corner to corner across an outlined button, filling it on the diagonal, and darkens the instant you press.

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.

2648Inset plate buttonButtonsA button inside a button: an outer shell holds a smaller floating plate that carries the label, and pressing shrinks only the inner plate while the shell stays put.

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.