Fieldbook
Sign in

Buttons

Sliding label button

A solid button whose label rolls straight up out of the frame while a second line rolls in from below to take its place.

Using Sliding label button

A solid button whose label rolls straight up out of the frame while a second line rolls in from below to take its place.

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, hoverLabel, variant, accent, slideMs

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

Rolling cube label button
2215Rolling cube label buttonButtonsA button whose label rides on the face of a shallow box, so pointing at it rolls the box a quarter turn and a second message arrives from above.
Rolling Label Button
1836Rolling Label ButtonButtonsA compact glowing pill that rolls its caption up out of view and brings a second line in from below on hover.
Dot flood button
1632Dot flood buttonButtonsAn outlined pill with a small dot beside its label; hovering grows the dot until it floods the whole button and the label swaps to its inverted twin.
Skewed wipe swap button
2703Skewed wipe swap buttonButtonsA button that swaps its label on hover or focus while a sheared accent panel wipes up across its face.
Ticker swap button
2682Ticker swap buttonButtonsA pill button whose label is replaced on hover by an endless ticker of the same word running sideways across its face.
Amber upload pill
2707Amber upload pillButtonsA warm gradient upload pill with a bright rim that widens its coloured cast and lights the label from behind on hover.