Buttons

Bevel frame button

A square framed button whose two ends bevel into points on hover, turning the rectangle into a six sided badge.

Using Bevel frame button

A square framed button whose two ends bevel into points on hover, turning the rectangle into a six sided badge.

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, tilt, thickness, duration

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

2501Arcade plate buttonButtonsA wide game-menu button with a grey outlined plate, an inset dark bevel and stamped lettering that brightens on hover and darkens while held down.

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.

1944Corner ticks frame buttonButtonsA dark rectangle marked only by four corner ticks that run out to draw a full frame, after which a lit panel opens from the centre and the label inverts.

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.

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.