Controls & Inputs

Click Ripple Button

클릭한 포인터 위치에서 리플이 퍼지는 버튼입니다.

Preview

action control

Click Ripple Button

click to send a ripple

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong.dev/r/ripple-button.json

Code

typescript
Copied
1import { RippleButton } from "@/components/ripple-button"23export default function Example() {4  return <RippleButton>Click me</RippleButton>5}

Props

PropTypeDefaultDescription
childrenReact.ReactNode-Content rendered inside the component.
classNamestring-Additional classes merged onto the component.
rippleColorstring"#ffffff"Color of the ripple wave.
durationstring"600ms"Ripple animation duration.
...propsButtonHTMLAttributes<HTMLButtonElement>-Native button props.

Reference

Reference Click Ripple Button