Buttons

Border trace button

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

Using Border trace button

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

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, tracking, sweep

Which frameworks are available?

The catalog lists these versions: react. 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

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.

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.

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.

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.

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.

1849Color swap play buttonButtonsAn uppercase play pill that trades its ground and text colors on hover, lifting as its colored glow turns dark.