Fieldbook
Sign in

Buttons

Panning gradient button

A domed key whose oversized diagonal gradient pans across the face on hover, sweeping a lighter band from one corner to the other.

Using Panning gradient button

A domed key whose oversized diagonal gradient pans across the face on hover, sweeping a lighter band from one corner to the other.

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, deep, label, duration, dome

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

Hard edge key button
2165Hard edge key buttonButtonsA compact hardware-style key that flips its highlight, outline and shadow inward the instant you press it.
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.
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.
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.
Breathing Inset Button
2579Breathing Inset ButtonButtonsA pale moulded button whose inner panel pulls away from the rim on hover while the send glyph slides a short distance toward the label.
Brightening gradient button
1926Brightening gradient buttonButtonsA deep two-tone chip whose vertical wash climbs to a much brighter pair of the same family on hover, with a fixed glass highlight along its top edge.