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. |