컴포넌트
ButtonFillHover
커서가 들어온 방향에서부터 브랜드 컬러가 원점 기준으로 차오르고 나간 지점으로 다시 빠져나가는 호버 채움 버튼입니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ButtonFillHover-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "Hover Me" | 버튼에 표시되는 라벨 텍스트. |
| fillColor | string | "#C084FC" | 호버 시 커서 방향에서 차오르는 채움 색상. |
| duration | number | 520 | 색이 번지고 회수되는 채움 애니메이션 시간(ms). 하한 80ms. |
| radius | number | 14 | 버튼 모서리 둥글기(px). |
| onClick | () => void | undefined | 클릭 및 Enter/Space 키 활성화 시 호출되는 콜백. |
| ariaLabel | string | label 값 | 접근성 라벨. 미지정 시 label을 사용. |