Fieldbook
Sign in

Buttons

Elevated chip button

A pale rounded chip resting on stacked soft shadows that tints toward the accent on hover and sinks onto a deeper shadow with an accent outline when pressed.

Using Elevated chip button

A pale rounded chip resting on stacked soft shadows that tints toward the accent on hover and sinks onto a deeper shadow with an accent outline when pressed.

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, elevation, radius, paddingX

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

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.
Lift and settle button
2479Lift and settle buttonButtonsA solid button that floats up and takes on the accent colour on hover, then sinks past its resting line into a collapsed shadow when pressed.
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.
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.
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.
Emboss swap button
1955Emboss swap buttonButtonsA small saturated chip that trades its flat cast shadow for a four way moulded relief on hover, so the surface appears to be pressed out of the page.