Ripple Button

Use Ripple Button when an action benefits from a pointer-originating visual response. The ripple begins where the person points or presses, while the button keeps standard button behavior.

Preview

Reduce motion:Off

Tune:Off

Inspect

Installation

Motion

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

Basic usage

ripple-button.tsx

import RippleButton from "@/components/ui/ripple-button/ripple-button";
 
export function RippleAction() {
return <RippleButton>Explore</RippleButton>;
}

Examples

Adjust the ripple scale, duration, and classes to fit the action. Use the text helper when the label needs its own treatment inside the 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>
  );
}

API

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.

Accessibility

Use a clear visible label or aria-label for icon-only actions. The ripple is supplementary feedback and does not replace focus or pressed states.

Styling

The component forwards native button props, including disabled and event handlers. Reduced-motion preferences retain the interaction state without animated expansion.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Sona UI