Fieldbook
Sign in

Buttons

Share row lift

A share pill that lifts a matching pill of destination icons up out of itself on hover and drops it back the moment attention leaves.

Using Share row lift

A share pill that lifts a matching pill of destination icons up out of itself on hover and drops it back the moment attention leaves.

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, destinations, liftDistance, stagger

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

Disc to Pill CTA
2622Disc to Pill CTAButtonsA small filled disc beside a bare uppercase label stretches into a full pill on hover or focus, revealing the text and carrying the arrow along.
Ghost echo lift button
2606Ghost echo lift buttonButtonsA pill that lifts on hover while a ghost copy of itself swells outward behind it and dissolves.
Hairline lift pill
2609Hairline lift pillButtonsA quiet translucent pill with an inner hairline edge that lifts off the surface and picks up an accent tint on hover.
Leap and tint button
2631Leap and tint buttonButtonsA pale pill that leaps upward on hover or focus while its fill turns to the accent and its neutral shadow blooms into a large tinted pool in the same hue.
Lifting glyph row
2611Lifting glyph rowButtonsA short row of icon-only buttons where the hovered glyph lifts off the baseline while a soft circular tint fades in behind it, each item tinted in its own hue.
Lifting hard shadow pill
2663Lifting hard shadow pillButtonsA thick outlined pill that drifts up and to the left on hover while its flat solid shadow stretches out underneath it, and presses flush against the page while held.