Fieldbook
Sign in

Buttons

Rim to fill gradient button

A dark button shows only a thin gradient rim at rest; hovering drops the inner panel so the gradient floods the whole face, and pressing squeezes it down.

Using Rim to fill gradient button

A dark button shows only a thin gradient rim at rest; hovering drops the inner panel so the gradient floods the whole face, and pressing squeezes it down.

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, endColor, rimWidth, angle, pressScale

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

Charge Up Action Button
2314Charge Up Action ButtonButtonsA charcoal pill that lights into a saturated gradient key on hover, lifting off the surface while its mark turns and brightens.
Gradient swap button
1862Gradient swap buttonButtonsA rounded button whose diagonal shading trades its two stops on hover, so the light corner travels across the face.
Graphite Slab CTA
2669Graphite Slab CTAButtonsA fixed-width dark slab button with a subtle graphite ramp that lifts on hover and carries a thin accent rule along its bottom edge.
Swelling pill button
2578Swelling pill buttonButtonsA one-hue gradient pill that swells larger on hover while a tinted shadow spreads beneath it, and compresses briefly 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.
Border brighten button
2641Border brighten buttonButtonsA dark button whose two pixel frame is the only moving part: it climbs to white on hover and collapses into a tight inner ring while the button is held.