Buttons

Tracing edge button

A solid button where four hairlines start at opposite corners and draw the whole perimeter on hover, meeting exactly as the outline closes.

Using Tracing edge button

A solid button where four hairlines start at opposite corners and draw the whole perimeter on hover, meeting exactly as the outline closes.

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, traceMs, cornerRadius

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

2709Border trace buttonButtonsA quiet translucent button whose four edges draw themselves in sequence on hover while a soft band of light crosses the face.

2647Hairline trace submitButtonsA dark submit button whose one pixel hairline lights up, tracing around the perimeter from the edge the pointer entered, then retreats back out the same way.

2484Perimeter draw buttonButtonsA 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.

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.

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.

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.