RippleButton
ripple-button波纹按钮 · 点击落点扩散(Material) + reduced-motion
用法
基础用法
点击后从落点扩散一圈 Material 风水波纹，动画结束自动移除。
tsx
<RippleButton>点我看波纹</RippleButton>波纹速度
duration 控制单次波纹扩散的时长。
tsx
<RippleButton duration="400ms">快</RippleButton>
<RippleButton duration="900ms">慢</RippleButton>自定义波纹色
rippleColor 指定波纹颜色，缺省取 primary-foreground。
tsx
<RippleButton rippleColor="rgba(255,255,255,0.7)">高对比波纹</RippleButton>何时用
需要 Material 风格「点击落点扩散波纹」反馈的按钮。普通操作用 Button；只想要视觉特效（流光/彩虹/脉冲）而非点击涟漪时用 ShimmerButton / RainbowButton / PulsatingButton。
导入
ts
import { RippleButton } from "@hulianui/ui"Props
继承全部原生 <button> 属性（disabled/type…）。
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| rippleColor | string | var(--color-primary-foreground) | 波纹颜色 |
| duration | string | "600ms" | 单次波纹动画时长 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onClick | (e: MouseEvent<HTMLButtonElement>) => void | 透传原生点击回调（点击同时触发波纹扩散） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 按钮内容（文案/图标） |
禁忌 / 坑
暂无已知坑。波纹动画在 prefers-reduced-motion: reduce 下自动抑制，无需手动处理。
相关
Button · ShimmerButton · RainbowButton · PulsatingButton · ButtonGroup · SocialButton
Playground
<RippleButton duration="600ms">点我看波纹</RippleButton>