Ripple Button

點擊時以游標落點為圓心放射出一圈漣漪，直徑取到最遠角落，確保水波蓋滿整顆按鈕。漣漪疊在內容底下、被 overflow-hidden 裁切成按鈕形狀。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

漣漪顏色rippleColor

擴散時長（秒）duration

0.6

漣漪起始不透明度opacity

0.5

停用按鈕disabled

<RippleButton />

npx shadcn@latest add https://webberui.com/r/ripple-button.json

或在 components.json 設定 registries 後，改用 @webberui/ripple-button 安裝。

安裝依賴後，從 registry JSON（/r/ripple-button.json 的 files[0].content）複製 ripple-button.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

import { RippleButton } from "@/components/ui/ripple-button";

<RippleButton onClick={() => console.log("clicked")}>
  點我擴散
</RippleButton>

換色只要傳 rippleColor，其餘 <button> 屬性（type、disabled、onClick…）都會透傳。

除下列以外，其餘原生 <button> 屬性皆會透傳。