Buttons

Sealing frame button

A square outlined call to action whose border sits broken by three gaps at rest; hovering seals the frame shut as the fill inverts.

Using Sealing frame button

A square outlined call to action whose border sits broken by three gaps at rest; hovering seals the frame shut as the fill inverts.

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, borderWidth, ruleLength, uppercase

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

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.

2644Corner bracket seal buttonButtonsTwo short corner brackets grow along the edges until they seal into a complete frame around the label on hover.

2763Draining fill buttonButtonsA flooded button that drains out of one edge on hover, leaving a hollow outline with the label flipped to the accent.

2597Edge wipe invertButtonsAn outlined button whose solid fill wipes in from one edge and inverts the label as it passes underneath.

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.

2700Invert and lift buttonButtonsA tall outlined button that inverts to a solid fill and lifts a couple of pixels on hover, then settles flat again when pressed.