Ripple Button

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

Ripple Button 是用 React、Motion 與 Tailwind CSS 做的水波紋點擊按鈕（ripple effect button），漣漪的進場與移除由 Motion 的 AnimatePresence 管理。連續點擊時每一圈各自擴散，動畫結束後自動從 DOM 移除。

Playground

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<RippleButton/>

    </div>
  );
}

適用情境

• 表單送出、加入購物車等主要操作按鈕，提供明確的按壓回饋
• 行動版網頁或 PWA，模擬原生 App 的觸控回饋
• 後台工具列、對話框底部的確認與取消按鈕
• 不適合：需要顯示載入中、成功或失敗狀態的按鈕，改用 Stateful Button

安裝

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

使用

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

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

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

範例

淺色按鈕搭配深色漣漪

預設漣漪是半透明白，放在淺色背景上看不到；改淺色按鈕時記得一併調整 rippleColor。

<RippleButton
  rippleColor="rgba(0, 0, 0, 0.12)"
  className="border border-neutral-200 bg-white text-neutral-900 hover:bg-neutral-50"
>
  取消
</RippleButton>

className 透過 cn 與預設樣式合併，背景、文字色與圓角都可以直接覆寫。

表單送出按鈕

type、disabled 等原生屬性會透傳到 <button>；內容外層是 inline-flex gap-2，圖示與文字會自動排好間距。

<RippleButton type="submit" disabled={isSubmitting}>
  {isSubmitting && <Spinner className="size-4" />}
  {isSubmitting ? "送出中" : "送出訂單"}
</RippleButton>

Spinner 代表你專案中的載入圖示元件。

品牌色與較慢的漣漪

duration 以秒為單位，opacity 是漣漪剛出現時的不透明度，之後淡出到 0。

<RippleButton
  rippleColor="rgba(255, 255, 255, 0.7)"
  duration={1}
  opacity={0.8}
  className="bg-indigo-600 text-white hover:bg-indigo-500"
>
  建立專案
</RippleButton>

Props

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

可及性

• 使用者系統開啟「減少動態效果」時，略過漣漪、僅保留一般按鈕行為
• 漣漪層帶 aria-hidden 且 pointer-events-none，不影響輔助科技與點擊
• 保留原生 <button> 語意與鍵盤 focus ring，disabled 時停用互動

常見問題

可以在 Next.js App Router 使用嗎？

可以。檔案開頭已經有 "use client"，在 Server Component 頁面裡照一般方式 import 即可；onClick 這類事件處理函式需要在 Client Component 裡傳入。

漣漪為什麼不會超出按鈕？

漣漪放在一層 overflow-hidden、rounded-[inherit] 的容器裡，會被裁成按鈕的形狀；直徑取點擊點到最遠角落的距離乘 2，所以從任何位置點擊都能蓋滿整顆按鈕。

可以當成連結使用嗎？

元件固定渲染 <button>，沒有 asChild 之類的選項。需要導頁時，在 onClick 裡呼叫路由的導頁方法，或修改原始碼改用連結元素。

自己傳的 onClick 還會觸發嗎？

會。元件先產生漣漪，再呼叫你傳入的 onClick；style 也會與內部設定的 CSS 變數合併。

有考慮減少動態效果嗎？

有。偵測到「減少動態效果」時不產生漣漪，只保留一般按鈕的行為。