Ripple Button Component

An interactive button with a ripple effect for modern UIs.

Features

Pointer-aware feedback — Mouse hover and touch/pen press start the effect at the pointer location.
Customizable motion — Adjust the ripple scale, duration, and styling.
Reduced-motion safe — Keeps the interaction state without animated expansion.
Native button behavior — Forwards button props, including disabled and event handlers.

Playground

Tweak the props live and hover the button to see the ripple react.

Controls

Scale amount25

Duration (s)0.5

Button text

Installation

npx shadcn@latest add @sona-ui/ripple-button

Usage


interface LocalRippleButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children?: ReactNode;
  scaleAmount?: number;
  className?: string;
  duration?: number;
  rippleStyle?: string;
}
 
interface RippleButtonEx1Props
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  buttonProps?: LocalRippleButtonProps;
  textProps?: RippleButtonTextProps;
  className?: string;
}
 
export default function RippleButtonExample({
  textProps,
  buttonProps,
  className,
  ...props
}: RippleButtonEx1Props) {
  return (
    <RippleButton {...buttonProps}>
      <RippleButtonText {...textProps} text="Hover me!" />
    </RippleButton>
  );
}

Props

Property	Type	Default	Description
`children`	`ReactNode`	`required`	The content to be displayed inside the button.
`scaleAmount`	`number`	`25`	The scale amount for the ripple effect.
`className`	`string`	`—`	Additional CSS classes for the button.
`duration`	`number`	`0.5`	Duration of the ripple animation in seconds.
`rippleStyle`	`string`	`—`	Additional CSS classes for the ripple effect.