Liquid Glass Button

A premium, realistic liquid glass UI component suite featuring multi-stage prism depth, curved top glare reflections, bottom internal refraction rings, and pure translucent glass effect without background color distortion. Supports clear glass, colored liquid gradients, and responsive size presets.

...

How to Import

Add this import to your component file

app/page.tsx

1import { LiquidGlassButton, LiquidGlassInput, LiquidGlassSelect, LiquidGlassSwitch, LiquidGlassCard } from "@/components/lightswind/liquid-glass-button"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

variant	"glass" \| "primary" \| "secondary" \| "icon" \| "accent" \| "emerald" \| "outline"	"glass"	Visual design variant of the glass button.	Optional
size	"sm" \| "md" \| "lg" \| "xl" \| "icon"	"md"	Button sizing preset.	Optional
fullWidth	boolean	false	Expand button to fill full container width.	Optional
icon	React.ReactNode	-	Optional icon element rendered inside button.	Optional
glow	boolean	true	Enable multi-stage prism glow shadows.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { LiquidGlassButton } from "@/components/lightswind/liquid-glass-button";
2
3export function Demo() {
4  return (
5    <div className="flex items-center gap-4">
6      <LiquidGlassButton variant="glass" size="md">
7        Clear Glass
8      </LiquidGlassButton>
9      <LiquidGlassButton variant="primary" size="md">
10        Start Project
11      </LiquidGlassButton>
12    </div>
13  );
14}

Variants

Different visual and behavioral variants of the component

Clear Liquid Glass Variant

Pure, translucent glass effect with multi-stage prism depth and glare reflections without color tint.

Preview not available for this example.

Previousholo-button

Nextmagnetic-button

A product byＭＵＨＩＬＡＮ and Team❤️.

Liquid Glass Button

A premium, realistic liquid glass UI component suite featuring multi-stage prism depth, curved top glare reflections, bottom internal refraction rings, and pure translucent glass effect without background color distortion. Supports clear glass, colored liquid gradients, and responsive size presets.

...

How to Import

Add this import to your component file

app/page.tsx

1import { LiquidGlassButton, LiquidGlassInput, LiquidGlassSelect, LiquidGlassSwitch, LiquidGlassCard } from "@/components/lightswind/liquid-glass-button"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

variant	"glass" \| "primary" \| "secondary" \| "icon" \| "accent" \| "emerald" \| "outline"	"glass"	Visual design variant of the glass button.	Optional
size	"sm" \| "md" \| "lg" \| "xl" \| "icon"	"md"	Button sizing preset.	Optional
fullWidth	boolean	false	Expand button to fill full container width.	Optional
icon	React.ReactNode	-	Optional icon element rendered inside button.	Optional
glow	boolean	true	Enable multi-stage prism glow shadows.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { LiquidGlassButton } from "@/components/lightswind/liquid-glass-button";
2
3export function Demo() {
4  return (
5    <div className="flex items-center gap-4">
6      <LiquidGlassButton variant="glass" size="md">
7        Clear Glass
8      </LiquidGlassButton>
9      <LiquidGlassButton variant="primary" size="md">
10        Start Project
11      </LiquidGlassButton>
12    </div>
13  );
14}

Variants

Different visual and behavioral variants of the component

Clear Liquid Glass Variant

Pure, translucent glass effect with multi-stage prism depth and glare reflections without color tint.

Preview not available for this example.

Previousholo-button

Nextmagnetic-button

A product byＭＵＨＩＬＡＮ and Team❤️.

Liquid Glass Button

How to Import

Props

Basic Usage

Variants

Clear Liquid Glass Variant

On This Page

Contribute

Liquid Glass Button

How to Import

Props

Basic Usage

Variants

Clear Liquid Glass Variant

On This Page

Contribute

React Liquid Glass Button Component - Lightswind UI

Key Details of React Liquid Glass Button

Liquid Glass Button

How to Import

Props

Basic Usage

Variants

Clear Liquid Glass Variant

On This Page

Contribute

Liquid Glass Button

How to Import

Props

Basic Usage

Variants

Clear Liquid Glass Variant

On This Page

Contribute