Fieldbook
Sign in

Buttons

Foil frame button

An upgrade button built as a dark plate inside a thin metallic frame, where the frame's diagonal sheen slides to the opposite corner on hover while the plate lifts, brightens and gains an accent tinted shadow.

Using Foil frame button

An upgrade button built as a dark plate inside a thin metallic frame, where the frame's diagonal sheen slides to the opposite corner on hover while the plate lifts, brightens and gains an accent tinted shadow.

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, showGlyph, frameWidth, hoverScale

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

Bevel frame button
2674Bevel frame buttonButtonsA square framed button whose two ends bevel into points on hover, turning the rectangle into a six sided badge.
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.
Contrast Boost Frame Button
2659Contrast Boost Frame ButtonButtonsA pale inner plate floats inside a thick painted frame, and hovering cranks the whole thing brighter and more saturated without moving anything.
Corner bracket frame button
2596Corner bracket frame buttonButtonsA bare uppercase label that gets boxed in by two L-shaped brackets sliding in from opposite sides and then growing to close the frame.
Corner bracket seal button
2644Corner bracket seal buttonButtonsTwo short corner brackets grow along the edges until they seal into a complete frame around the label on hover.
Corner ticks frame button
1944Corner ticks frame buttonButtonsA dark rectangle marked only by four corner ticks that run out to draw a full frame, after which a lit panel opens from the centre and the label inverts.