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 |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Size step, on the same 32/40/48px scale as Button. |
| 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 |
| render | ReactElement | Custom rendered element, such as <a> or Next.js <Link>; button styles and the bottom glow layer are merged into it. |
Example
tsx
<RainbowButton>Get Started</RainbowButton>
// Slower animation
<RainbowButton speed="5s">Get Started</RainbowButton>
// A landing-page CTA is often a link: render swaps the tag, the rainbow and glow stay
<RainbowButton render={<Link href="/pricing" />}>See pricing</RainbowButton>Usage guidelines
- Shares its base with [Button](/components/button). Layout, the three
sizesteps (32/40/48px tall), the focus ring, the disabled treatment, andforwardRefall come from the sameEFFECT_BUTTON_BASE_CLASSandBUTTON_SIZE_CLASS. Colour and corner radius are deliberately not shared, since the background is this component's own effect layer. As a result it lines up with regular Buttons and matches the library-wide focus style; before 0.27.0 each effect button rolled its own markup, lacked all of the above, and sized itself withpx-6 py-3, so a toolbar row came out uneven (#126).
- 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>