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-blog.vercel.app/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

children

Type
React.ReactNode
Default
-
Description
Content rendered inside the component.

className

Type
string
Default
-
Description
Additional classes merged onto the component.

rippleColor

Type
string
Default
"#ffffff"
Description
Color of the ripple wave.

duration

Type
string
Default
"600ms"
Description
Ripple animation duration.

...props

Type
ButtonHTMLAttributes<HTMLButtonElement>
Default
-
Description
Native button props.

Reference

Reference Click Ripple Button