Installation
Usage
import { LiquidMetalButton } from "@/components/ui/liquid-metal-button";<LiquidMetalButton theme="silver" size="md">
Click Me
</LiquidMetalButton>
<LiquidMetalButton
theme="gold"
variant="outline"
textured={true}
>
Metallic Effect
</LiquidMetalButton>
<LiquidMetalButton
theme="custom"
customColors={{
base: "rgb(30, 50, 100)",
highlight: "rgb(100, 150, 255)",
shadow: "rgb(10, 20, 40)",
text: "rgb(240, 240, 255)"
}}
>
Custom Theme
</LiquidMetalButton>Props
Liquid Metal Button
| Prop | Type | Default | Description |
|---|---|---|---|
variant | string | "default" | Button variant: "default", "outline", "ghost" |
size | string | "md" | Button size: "xs", "sm", "md", "lg", "xl", "2xl" |
theme | string | "silver" | Color theme: "silver", "gold", "copper", "mercury", "steel", "emerald", "sapphire", "custom" |
customColors | object | undefined | Custom colors for "custom" theme (base, highlight, shadow, text, border, glow) |
clickEffect | boolean | true | Enable click animation |
hoverAnimation | boolean | true | Enable hover animation |
textured | boolean | false | Apply textured effect |
icon | React.ReactNode | undefined | Icon displayed before children |
iconAfter | React.ReactNode | undefined | Icon displayed after children |
className | string | "" | Additional CSS classes |
children | React.ReactNode | undefined | Content of the button |