Rainbow Button

An animated button with a continuous rainbow border and under-glow. Heights and radius match Button. Install also injects the spectrum tokens and keyframes into your theme CSS.

Variants

default stays dark, white stays light, theme follows the color scheme, and outline uses a soft surface.

Loading…

Installation

CLI

npx @sonojs/ui@latest add rainbow-button

Usage

rainbow-button.tsx

import { RainbowButton } from "@/components/ui/rainbow-button"

export function Example() {
  return <RainbowButton>Get Unlimited Access</RainbowButton>
}

Props

Prop	Type	Default	Description
variant	"default" · "white" · "theme" · "outline"	"default"	Dark fill, white fill, theme-adaptive fill, or outline surface. Label color is locked to the fill for contrast.
size	"default" · "xs" · "sm" · "lg" · "icon" · "icon-xs" · "icon-sm" · "icon-lg"	"default"	Same scale as Button — default `46px`, sm `40px`, lg `52px`, plus icon sizes.
asChild	boolean	false	Merge props onto the child element via Slot.
disabled	boolean	false	Disables pointer events and dims the control.