Rainbow Button

A button with a rainbow gradient and animated effect. It renders as a styled button with visual animation. Use it for interactive elements needing a vibrant, eye-catching appearance.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/rainbow-button

npx layro-cli add @magicuidesign/rainbow-button

npx layro-cli add @magicuidesign/rainbow-button

bunx layro-cli add @magicuidesign/rainbow-button

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const rainbowButtonVariants = cva(
  cn(
    "relative cursor-pointer group transition-all animate-rainbow",
    "inline-flex items-center justify-center gap-2 shrink-0",
    "rounded-sm outline-none focus-visible:ring-[3px] aria-invalid:border-destructive",
    "text-sm font-medium whitespace-nowrap",
    "disabled:pointer-events-none disabled:opacity-50",
    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0"