Viora LogoViora UI
Login

Gradient Button

That was so hard to make.

demo-particle-button.tsx
Loading source code...

Installation

pnpm dlx viora-ui add gradient-button
npx viora-ui add gradient-button
yarn viora-ui add gradient-button
bunx --bun viora-ui add gradient-button

Usage

import { GradientButton } from "viora-ui";
import { GradientButton } from "viora-ui";

export default function GradientButtonDemo() {
  return (
    <div className="flex min-h-[350px] w-full items-center justify-center p-6">
      <GradientButton />
    </div>
  );
}

API Reference

GradientColors

PropTypeDefaultDescription
dark{ border: string; overlay: string; accent: string; text: string; glow: string; textGlow: string; hover: string; }-Configuration for dark.
light{ border: string; base: string; overlay: string; accent: string; text: string; glow: string; hover: string; }-Configuration for light.

GradientButton

PropTypeDefaultDescription
icon?string-Configuration for icon.
label?string-Configuration for label.
className?string""Additional CSS classes for custom styling.
variant?ColorVariant-Visual style variant.

Built by Otis

Last updated: 9/13/2026