Fieldbook
Sign in

Buttons

Squash key button

A key-cap button that squashes flat under the pointer while a base slab slides out from beneath it, then drops onto the slab when held.

Using Squash key button

A key-cap button that squashes flat under the pointer while a base slab slides out from beneath it, then drops onto the slab when held.

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, squash, dropPx, showIcon

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

Arcade dome button
2574Arcade dome buttonButtonsA round pushbutton whose domed cap floats above a darker base and seats flush with a visible drop when pressed.
Deep Slab Button
1825Deep Slab ButtonButtonsA tall slab that floats above the page on a long diagonal shadow and sinks onto it when hovered, then slams flat on click.
Radial sheen button
1878Radial sheen buttonButtonsA short key-like button lit from its top-right corner, with a hairline base edge that inverts when pressed.
Three layer push button
2620Three layer push buttonButtonsA tactile key built from three stacked plates, a cast shadow, a dark side wall and a floating face, that springs up on hover and bottoms out instantly on press.
Bevel press pill
2708Bevel press pillButtonsA dark bevelled pill with a recessed round chip on its end that sinks into the surface when pressed.
Growing ledge button
2566Growing ledge buttonButtonsA solid accent button resting on a darker bottom ledge that thickens and lifts on hover, then thins and sinks under a press.