RippleButton

何时用

需要 Material 风格「点击落点扩散波纹」反馈的按钮。普通操作用 Button；只想要视觉特效（流光/彩虹/脉冲）而非点击涟漪时用 ShimmerButton / RainbowButton / PulsatingButton。

导入

Props

继承全部原生 <button> 属性（disabled/type…）。

Events

Slots

禁忌 / 坑

• 与 [Button](/zh/components/button) 共享底座与配色档：排布、size 三档（32/40/48px 高）、焦点环、禁用态视觉、forwardRef 来自同一份 EFFECT_BUTTON_BASE_CLASS + BUTTON_SIZE_CLASS；variant × tone 的色号与 Button 逐格对齐（#233）。不共享的是圆角、阴影与颜色 hover——圆角是特效件自己的，shadow-sm 四个特效件一个都没有，而颜色 hover 与本件底座冲突（下一条）。0.27.0 前四个特效件各写各的，这些全缺，px-6 py-3 按内容撑高，工具栏里一排按钮会参差（#126）。
• 没有颜色 hover，交互反馈由波纹负责。 特效件的底座刻意不含 transition-colors（它们变的是背景动画不是颜色），挂 hover:bg-* 会是一次无过渡的跳变。所以 variant="ghost" 的静息态就是一段文字，鼠标悬停不变底——要「悬停就有反应」的次要操作请用 Button variant="ghost"，本件的反馈是点下去那一下。
• `variant` 没有 `link`，`tone` 没有 `current`。 前者是因为波纹要有盒子：link 去掉了高度与横向内边距，波纹落在 h-auto px-0 的文字上会裁成一条缝或整片糊住文字。后者是因为波纹默认色要从 tone 推导，而 current 的意思正是「别设色、跟随容器继承」——真要跟随容器请显式传 rippleColor="currentColor"。
• `variant` 讲外观，`render` 讲语义，别读混。 上一条说的「要链接样式请用 Button variant="link"」指的是长相（要不要按钮盒子）；如果你要的是「长得就是这颗实心按钮、但它得是个 <a>」——中键新开标签页、右键复制链接、爬虫能看见——那是 render={<a href="…" />}，波纹与配色一样不少（#256）。
• 波纹色默认按档推导：实心档用该 tone 的前景色（深底上的浅波纹），描边 / 幽灵 / 浅底档用该 tone 的本色。反过来（浅底上用前景色）会得到一圈几乎看不见的白，所以自定义 rippleColor 时注意底色。
• 波纹动画在 prefers-reduced-motion: reduce 下自动抑制，无需手动处理。

相关

Button · ShimmerButton · RainbowButton · PulsatingButton · ButtonGroup · SocialButton