Holo Button

A premium, highly interactive button component featuring mouse-tracking radial flares, spinning gradient border beams, and responsive micro-interactions. The button adapts its color palette, glows, and flare gradients dynamically between light and dark themes, ensuring a spectacular, premium aesthetic in all states.

...

How to Import

Add this import to your component file

app/page.tsx

1import HoloButton from "@/components/lightswind/holo-button"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

variant	"primary" \| "cyber" \| "rosegold" \| "glass"	"primary"	Visual design variant of the button, adapting background, text colors, and gradient flares.	Optional
size	"sm" \| "md" \| "lg" \| "xl"	"md"	Button sizing preset matching common viewport layout proportions.	Optional
glowSize	number	120	The diameter (in pixels) of the mouse-tracking iridescent radial flare overlay.	Optional
theme	"light" \| "dark" \| "system"	"system"	Controls color contrast styling. 'system' automatically monitors HTML theme class changes.	Optional

Basic Usage

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

app/page.tsx

1import HoloButton from "@/components/lightswind/holo-button";
2import { Sparkles } from "lucide-react";
3
4export function Demo() {
5  return (
6    <HoloButton variant="primary" size="md">
7      <Sparkles className="w-4 h-4" />
8      <span>Launch Experience</span>
9    </HoloButton>
10  );
11}

Variants

Different visual and behavioral variants of the component

Cyberpunk Variant

Set variant='cyber' for neon-cyan background flare, fuchsia border beams, and glowing shadow.

Preview not available for this example.

Previousgradient-button

Nextliquid-glass-button

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

Holo Button

A premium, highly interactive button component featuring mouse-tracking radial flares, spinning gradient border beams, and responsive micro-interactions. The button adapts its color palette, glows, and flare gradients dynamically between light and dark themes, ensuring a spectacular, premium aesthetic in all states.

...

How to Import

Add this import to your component file

app/page.tsx

1import HoloButton from "@/components/lightswind/holo-button"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

variant	"primary" \| "cyber" \| "rosegold" \| "glass"	"primary"	Visual design variant of the button, adapting background, text colors, and gradient flares.	Optional
size	"sm" \| "md" \| "lg" \| "xl"	"md"	Button sizing preset matching common viewport layout proportions.	Optional
glowSize	number	120	The diameter (in pixels) of the mouse-tracking iridescent radial flare overlay.	Optional
theme	"light" \| "dark" \| "system"	"system"	Controls color contrast styling. 'system' automatically monitors HTML theme class changes.	Optional

Basic Usage

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

app/page.tsx

1import HoloButton from "@/components/lightswind/holo-button";
2import { Sparkles } from "lucide-react";
3
4export function Demo() {
5  return (
6    <HoloButton variant="primary" size="md">
7      <Sparkles className="w-4 h-4" />
8      <span>Launch Experience</span>
9    </HoloButton>
10  );
11}

Variants

Different visual and behavioral variants of the component

Cyberpunk Variant

Set variant='cyber' for neon-cyan background flare, fuchsia border beams, and glowing shadow.

Preview not available for this example.

Previousgradient-button

Nextliquid-glass-button

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

Holo Button

How to Import

Props

Basic Usage

Variants

Cyberpunk Variant

On This Page

Contribute

Holo Button

How to Import

Props

Basic Usage

Variants

Cyberpunk Variant

On This Page

Contribute

React Holo Button Component - Lightswind UI

Key Details of React Holo Button

Holo Button

How to Import

Props

Basic Usage

Variants

Cyberpunk Variant

On This Page

Contribute

Holo Button

How to Import

Props

Basic Usage

Variants

Cyberpunk Variant

On This Page

Contribute