Back
Ripple Button
Satu Visual ComponentNew
A button that emits a material-style ripple from the click point.
Installation
Add it with the CLI:
Terminal
$
Or open the Code tab above and copy it in manually — it relies on the standard cn() helper from @/lib/utils.
Usage
Click anywhere on the button to send a ripple out from that point.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Button content. |
| className | string | — | Extra classes. |
| ...props | ButtonHTMLAttributes | — | Native <button> props. |
Requirements
No external npm dependencies. ✨
Add this to your Tailwind config:
tailwind.config.ts
// theme.extend
animation: { ripple: "ripple 0.6s ease-out" },
keyframes: {
ripple: { to: { transform: "translate(-50%, -50%) scale(28)", opacity: "0" } },
},