Docs
Button
Lego Button

Lego Button

A Lego-styled button with a springy press effect.

by Sarthak Kapila

Installation


Usage


Lego Button Example

1import LegoElements from "@/components/lego-button";
2
3export default function Example() {
4 return (
5 <>
6 <LegoElements
7 variant="A"
8 onVariantChange={(variant) => console.log('Variant changed:', variant)}
9 />
10 <LegoElements
11 variant="B"
12 onVariantChange={(variant) => console.log('Variant changed:', variant)}
13 />
14 <LegoElements
15 variant="C"
16 label="Get Started"
17 link="/signup"
18 newTab={true}
19 />
20 </>
21 );
22}

Understanding the component


The button uses a subtle elevation shadow that collapses on press, creating a tactile feel. Motion is powered by a spring animation for a responsive interaction.

Credits


By Sarthak Kapila.

Props


PropTypeDefaultDescription
labelstring"Get started"Text displayed inside the button.
textstring"Get started"Text displayed inside the button.
linkstring"#"Optional link to wrap the button (Next.js Link).
widthnumber144Button width in pixels.
newTabbooleanfalseOpen link in new tab.
smoothScrollbooleanfalseSmooth scroll to link.
heightnumber56Button height in pixels.
classNamestring-Optional class name on the root container.
styleReact.CSSProperties-Inline styles for the root container.
layoutIdstring-Optional layout id for the root container.
onVariantChange(variant: string) => void-Callback function when the variant changes.