RainbowButton
rainbow-buttonAnimates a multicolor border around a prominent action button.
Usage
Basic usage
The background color is a flowing rainbow gradient (take chart-1..4 token, switch with the light and dark theme), with a blurred halo at the bottom.
tsx
<RainbowButton>Get Started</RainbowButton>Flow speed
speed Controls the duration of one round of rainbow translation. The smaller it is, the faster it flows.
tsx
<RainbowButton speed="2s">Rapid</RainbowButton>
<RainbowButton speed="5s">Soothing</RainbowButton>When to use
Use RainbowButton for a highly prominent hero CTA with flowing chart colors and a blurred halo. Use Button for ordinary actions, ShimmerButton for one animated edge highlight, or PulsatingButton for an expanding pulse.
Import
ts
import { RainbowButton } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| speed | string | 3s | Duration of one rainbow animation cycle. |
| ...buttonProps | ComponentPropsWithoutRef<"button"> | — | Native button props. |
Events
| Event | Type | Description |
|---|---|---|
| onClick | (e: MouseEvent<HTMLButtonElement>) => void | Click callback, transparently transmitted via ComponentPropsWithoutRef<"button"> |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Button copy, transparently transmitted through the native button attribute |
Example
tsx
<RainbowButton>Get Started</RainbowButton>
// Slower animation
<RainbowButton speed="5s">Get Started</RainbowButton>Usage guidelines
- Tailwind Preflight applies
svg { display: block }, which can split a custom icon and label. See [[tailwind-preflight-svg-block-breaks-icon-text-in-nonflex-button]] and make the content wrapperinline-flex.
Related
Button · ShimmerButton · PulsatingButton · RippleButton · ButtonGroup · SocialButton
Playground
<RainbowButton speed="3s">Get Started</RainbowButton>