RainbowButton
rainbow-button彩虹按钮 · chart 流光底 + 模糊光晕 + RSC
用法
基础用法
底色为流动的彩虹渐变（取 chart-1..4 token，随明暗主题切换），底部带模糊光晕。
tsx
<RainbowButton>Get Started</RainbowButton>流动速度
speed 控制彩虹一轮平移的时长，越小流动越快。
tsx
<RainbowButton speed="2s">急速</RainbowButton>
<RainbowButton speed="5s">舒缓</RainbowButton>何时用
需要最强吸睛的英雄 CTA，底部 chart 色彩流动 + 模糊光晕。普通操作用 Button；单道边缘火花用 ShimmerButton；外扩脉冲光环用 PulsatingButton。
导入
ts
import { RainbowButton } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| speed | string | 3s | 彩虹流动一轮秒数 |
| ...buttonProps | ComponentPropsWithoutRef<"button"> | — | 透传原生 button 属性 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onClick | (e: MouseEvent<HTMLButtonElement>) => void | 点击回调，经 ComponentPropsWithoutRef<"button"> 透传 |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 按钮文案，经原生 button 属性透传 |
禁忌 / 坑
- 自定义往按钮塞图标+文字若图标掉行，是 Tailwind Preflight
svg{display:block}所致，见 [[tailwind-preflight-svg-block-breaks-icon-text-in-nonflex-button]]——确保文案容器是inline-flex。
相关
Button · ShimmerButton · PulsatingButton · RippleButton · ButtonGroup · SocialButton
Playground
<RainbowButton speed="3s">Get Started</RainbowButton>