컴포넌트
ButtonRipple
클릭(또는 Enter/Space)한 지점에서 물결이 원형으로 확산되는 리플 버튼으로, 순수 CSS 트랜지션과 버튼 상대좌표만으로 구현했다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ButtonRipple-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | ReactNode | "리플 버튼" | 버튼에 표시할 라벨(텍스트 또는 노드). |
| variant | "solid" | "outline" | "ghost" | "solid" | 시각 변형: solid(그라데이션 채움) / outline(테두리) / ghost(투명). |
| rippleColor | string | "#FFFFFF" | 리플 색상(#RRGGBB 또는 rgba). 변형에 따라 투명도가 자동 보정됨. |
| duration | number | 620 | 리플 1개의 확산 지속 시간(ms). 120~2000 범위로 클램프. |
| maxRipples | number | 6 | 동시에 유지되는 최대 리플 수(초과 시 오래된 것부터 제거). |
| disabled | boolean | false | 비활성화 여부. true면 클릭/키보드 입력과 리플을 무시. |