Fieldbook
Sign in

Buttons

Glide swap button

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

Using Glide swap button

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

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, accent, glyph, width, ledge

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

Label swap slide button
2523Label swap slide buttonButtonsA bordered pill that swaps its whole contents on hover: the resting row slides up and out while a second row with its own icon and colour slides in from below.
Overshoot icon button
2580Overshoot icon buttonButtonsA pale pill with a large illustrated glyph parked in its left end that tugs outward past the rim and springs back on hover or focus.
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.
Slide under download button
2513Slide under download buttonButtonsA labelled button that slides a bright action tray out from under its plate on hover or focus, with a bobbing download arrow inside the tray.
Snap back icon button
2572Snap back icon buttonButtonsA bare glyph button that grows smoothly under the pointer and snaps back to its resting size the instant it is pressed.
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.