Buttons

Sketched outline button

An outlined button whose four corners are deliberately uneven, redrawing into a second lopsided shape with a dashed stroke on hover or focus.

Using Sketched outline button

An outlined button whose four corners are deliberately uneven, redrawing into a second lopsided shape with a dashed stroke on hover or focus.

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, stroke, wobble, dashOnHover, 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

2536Dashed outline tooltip buttonButtonsA dashed ghost button that floods with its accent on hover or focus while a pointed tooltip unrolls out of the edge nearest the 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.

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.

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