Fieldbook
Sign in

Buttons

Corner bracket seal button

Two short corner brackets grow along the edges until they seal into a complete frame around the label on hover.

Using Corner bracket seal button

Two short corner brackets grow along the edges until they seal into a complete frame around the label on hover.

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, thickness, stubLength, duration, halo

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

Frame draw button
2646Frame draw buttonButtonsA filled button that drains its fill away on hover while four thin bars race out from opposite corners to draw a complete frame, then everything returns on leave.
Clamp jaws glow button
2598Clamp jaws glow buttonButtonsA hollow outlined button whose side tick marks slide in, merge into jaws, and close over the label with an accent glow on hover or focus.
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.
Light sweep button
1869Light sweep buttonButtonsA lit outline button whose glowing edge sends a narrow band of light sweeping across it on hover.
Outline invert button
1872Outline invert buttonButtonsA dark slate button ringed in a warm outline that trades every color with its border on hover and lifts on a shifting glow.
Sealing frame button
2615Sealing frame buttonButtonsA square outlined call to action whose border sits broken by three gaps at rest; hovering seals the frame shut as the fill inverts.