Fieldbook
Sign in

Buttons

Perimeter draw button

A short thick bar parked under the label stretches and travels around all four sides on hover until it closes into a full outline, then retracts back into the bar on leave.

Using Perimeter draw button

A short thick bar parked under the label stretches and travels around all four sides on hover until it closes into a full outline, then retracts back into the bar on leave.

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, label, strokeWidth, duration, wash

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

Tracing edge button
2786Tracing edge buttonButtonsA solid button where four hairlines start at opposite corners and draw the whole perimeter on hover, meeting exactly as the outline closes.
Border trace button
2709Border trace buttonButtonsA quiet translucent button whose four edges draw themselves in sequence on hover while a soft band of light crosses the face.
Center out fill button
1848Center out fill buttonButtonsAn outlined uppercase button whose accent fill opens from a hairline at the center out to both edges on hover or focus.
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.
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.