Fieldbook
Sign in

Buttons

Shifting gradient pill

A capsule button painted with an oversized diagonal ramp that slides across the face when engaged, while two corner glows swap between a light and a deep tint of the same hue.

Using Shifting gradient pill

A capsule button painted with an oversized diagonal ramp that slides across the face when engaged, while two corner glows swap between a light and a deep tint of the same hue.

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, shift, glow, pressTilt

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

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.
Bevel press pill
2708Bevel press pillButtonsA dark bevelled pill with a recessed round chip on its end that sinks into the surface when pressed.
Capsule in frame button
2583Capsule in frame buttonButtonsA bordered outer tray holding a floating inner capsule that sinks into the frame for the length of a press.
Center bloom button
2471Center bloom buttonButtonsA solid rounded pill that brightens from the middle out as a pale circular wash grows past its own edges, then sinks flat when pressed.
Drifting Gradient Button
1851Drifting Gradient ButtonButtonsA button whose diagonal two-tone fill is oversized and never stops sliding, running faster while hovered and squashing on click.
Elevation ladder fill button
2660Elevation ladder fill buttonButtonsA capsule that climbs three elevation steps between rest, hover and press while a soft-edged accent wash crosses its face.