---
title: Liquid Metal Button
description: A button with an animated liquid metal shader effect.
---

<Callout>
  This button uses `bg-primary-foreground` so the liquid metal effect blends
  naturally with its surroundings—dark on dark in dark mode, light on light in
  light mode.
</Callout>

```tsx
import { LiquidMetalButton } from '@/components/ui/liquid-metal-button';

export function LiquidMetalButtonDefault() {
  return <LiquidMetalButton>Click me</LiquidMetalButton>;
}
```

## Installation

```bash
npx shadcn@latest add @fab-ui/liquid-metal-button
```

**Install the following dependencies:**

```bash
npm install @paper-design/shaders-react
```

**Copy and paste the following code into your project.**

```tsx
'use client';

import { Button } from '@/components/ui/button';
import { LiquidMetal, LiquidMetalProps } from '@paper-design/shaders-react';
import { cva, type VariantProps } from 'class-variance-authority';

import { cn } from '@/lib/utils';

const buttonVariants = cva(
  'relative flex items-center justify-center bg-transparent border-none cursor-pointer outline-none rounded-full overflow-hidden font-medium whitespace-nowrap text-primary',
  {
    variants: {
      size: {
        sm: 'min-w-28 h-9 px-4 text-xs',
        md: 'min-w-35.5 h-11.5 px-5 text-sm',
        lg: 'min-w-44 h-14 px-6 text-base',
      },
    },
    defaultVariants: { size: 'md' },
  }
);

type ShaderProps = Omit<LiquidMetalProps, 'className' | 'style' | 'shape'>;

type LiquidMetalButtonProps = Omit<
  React.ComponentProps<typeof Button>,
  'variant' | 'size'
> &
  Partial<ShaderProps> &
  VariantProps<typeof buttonVariants>;

export function LiquidMetalButton({
  children,
  size,
  className,
  ref,
  speed = 0.6,
  repetition = 4,
  softness = 0.5,
  shiftRed = 0.3,
  shiftBlue = 0.3,
  distortion = 0,
  contour = 0,
  angle = 45,
  scale = 8,
  offsetX = 0.1,
  offsetY = -0.1,
  ...props
}: LiquidMetalButtonProps) {
  return (
    <Button
      ref={ref}
      data-slot='liquid-metal-button'
      className={cn(buttonVariants({ size }), className)}
      {...props}
    >
      <LiquidMetal
        className='absolute inset-0 rounded-full'
        shape='none'
        speed={speed}
        repetition={repetition}
        softness={softness}
        shiftRed={shiftRed}
        shiftBlue={shiftBlue}
        distortion={distortion}
        contour={contour}
        angle={angle}
        scale={scale}
        offsetX={offsetX}
        offsetY={offsetY}
      />
      <div className='absolute inset-[calc(var(--spacing)*0.68)] rounded-full bg-primary-foreground inset-shadow-lg' />
      <span className='relative'>{children}</span>
    </Button>
  );
}
```

**Update the import paths to match your project setup.**

## Usage

```tsx
import { LiquidMetalButton } from "@/components/ui/liquid-metal-button"
```

```tsx
<LiquidMetalButton>Click me</LiquidMetalButton>
```

## Examples

### Sizes

```tsx
import { LiquidMetalButton } from '@/components/ui/liquid-metal-button';

export function LiquidMetalButtonSizes() {
  return (
    <div className='flex flex-wrap items-center gap-4'>
      <LiquidMetalButton size='sm'>Small</LiquidMetalButton>
      <LiquidMetalButton size='md'>Medium</LiquidMetalButton>
      <LiquidMetalButton size='lg'>Large</LiquidMetalButton>
    </div>
  );
}
```

### Custom Effect

```tsx
import { LiquidMetalButton } from '@/components/ui/liquid-metal-button';

export function LiquidMetalButtonCustom() {
  return (
    <LiquidMetalButton
      speed={1.2}
      repetition={6}
      softness={0.8}
      shiftRed={0.5}
      shiftBlue={0.1}
    >
      Custom Effect
    </LiquidMetalButton>
  );
}
```

## API Reference

### Props

| Prop         | Type                   | Default | Description                               |
| ------------ | ---------------------- | ------- | ----------------------------------------- |
| `size`       | `'sm' \| 'md' \| 'lg'` | `'md'`  | The size of the button.                   |
| `speed`      | `number`               | `0.6`   | Animation speed of the shader effect.     |
| `repetition` | `number`               | `4`     | Number of pattern repetitions.            |
| `softness`   | `number`               | `0.5`   | Softness of the metallic highlights.      |
| `shiftRed`   | `number`               | `0.3`   | Red color shift amount.                   |
| `shiftBlue`  | `number`               | `0.3`   | Blue color shift amount.                  |
| `distortion` | `number`               | `0`     | Distortion amount applied to the pattern. |
| `contour`    | `number`               | `0`     | Contour intensity.                        |
| `angle`      | `number`               | `45`    | Angle of the shader pattern in degrees.   |
| `scale`      | `number`               | `8`     | Scale of the shader pattern.              |
| `offsetX`    | `number`               | `0.1`   | Horizontal offset of the pattern.         |
| `offsetY`    | `number`               | `-0.1`  | Vertical offset of the pattern.           |