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";23export default function Example() {4 return (5 <>6 <LegoElements7 variant="A"8 onVariantChange={(variant) => console.log('Variant changed:', variant)}9 />10 <LegoElements11 variant="B"12 onVariantChange={(variant) => console.log('Variant changed:', variant)}13 />14 <LegoElements15 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
| Prop | Type | Default | Description | 
|---|---|---|---|
| label | string | "Get started" | Text displayed inside the button. | 
| text | string | "Get started" | Text displayed inside the button. | 
| link | string | "#" | Optional link to wrap the button (Next.js Link). | 
| width | number | 144 | Button width in pixels. | 
| newTab | boolean | false | Open link in new tab. | 
| smoothScroll | boolean | false | Smooth scroll to link. | 
| height | number | 56 | Button height in pixels. | 
| className | string | - | Optional class name on the root container. | 
| style | React.CSSProperties | - | Inline styles for the root container. | 
| layoutId | string | - | Optional layout id for the root container. | 
| onVariantChange | (variant: string) => void | - | Callback function when the variant changes. |