Introducing Nuvyx UI v1.0.0

Docs
Liquid Metal Button

Liquid Metal Button

Buttons that behave like mercury when clicked. A fluid effect that reacts to the mouse pointer.

ButtonsEffectsInteractive
Open in

Installation

Usage

import { LiquidMetalButton } from "@/components/ui/liquid-metal-button";
<LiquidMetalButton theme="silver" size="md">
  Click Me
</LiquidMetalButton>
 
<LiquidMetalButton
  theme="gold"
  variant="outline"
  intensity={4}
  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)"
  }}
  variant="mercury"
>
  Custom Theme
</LiquidMetalButton>

Props

Liquid Metal Button

PropTypeDefaultDescription
variantstring"default"Button variant: "default", "outline", "ghost", "mercury", "ripple", "gradient"
sizestring"md"Button size: "xs", "sm", "md", "lg", "xl", "2xl"
themestring"silver"Color theme: "silver", "gold", "copper", "mercury", "steel", "obsidian", "emerald", "ruby", "sapphire", "custom"
customColorsobjectundefinedCustom colors for "custom" theme (base, highlight, shadow, text, border, glow)
intensitynumber3Intensity of liquid effect (1-5)
magneticbooleantrueEnable magnetic pull effect
clickEffectbooleantrueEnable click animation
asChildbooleanfalseRender as child element
hoverAnimationbooleantrueEnable hover animation
texturedbooleanfalseApply textured effect
iconReact.ReactNodeundefinedIcon displayed before children
iconAfterReact.ReactNodeundefinedIcon displayed after children
classNamestring""Additional CSS classes
childrenReact.ReactNodeundefinedContent of the button