Fieldbook
Sign in

Buttons

Snap back icon button

A bare glyph button that grows smoothly under the pointer and snaps back to its resting size the instant it is pressed.

Using Snap back icon button

A bare glyph button that grows smoothly under the pointer and snaps back to its resting size the instant it is pressed.

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, label, size, hoverScale, strokeWidth

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

Border brighten button
2641Border brighten buttonButtonsA dark button whose two pixel frame is the only moving part: it climbs to white on hover and collapses into a tight inner ring while the button is held.
Glide swap button
2715Glide swap buttonButtonsA fixed width button that slides its label off the right edge while the glyph glides into the centre, all sitting on a hard coloured ledge the button drops onto when pressed.
Ring halo pill button
2521Ring halo pill buttonButtonsA pill button that keeps a clear gap around its colored core, fills that gap with a lightened accent ring on hover or keyboard focus, and squeezes inward while pressed.
Rising tooltip icon button
2554Rising tooltip icon buttonButtonsA chrome-free icon button whose glyph swells and turns warning-colored on hover while a small label chip rises in above it after a short delay.
Spring press button
1654Spring press buttonButtonsA plain button that grows a little under the pointer and dips while held, both on a short spring, with the two scales and the spring stiffness exposed as knobs.
Tilt pop button
2693Tilt pop buttonButtonsA small solid button that pops larger and cocks a couple of degrees to one side on hover, then flattens back into the surface when pressed.