컴포넌트
ButtonGradientBorder
회전하는 코닉 그라데이션 테두리를 두른 버튼으로, 마스크 exclude로 링만 남기고 호버 시 배속 회전과 클릭 시 컨테이너 내부에 격리된 물결(ripple) 효과를 보여준다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ButtonGradientBorder-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "Get Started" | 버튼에 표시할 라벨 텍스트. |
| borderWidth | number | 2 | 회전 테두리(링)의 두께(px). |
| spin | number | 4 | 테두리가 한 바퀴 도는 주기(초). 작을수록 빠르게 회전. |
| radius | number | 14 | 버튼 모서리 둥글기(px). |
| onClick | () => void | undefined | 버튼 클릭(또는 Enter/Space) 시 호출되는 콜백. |
| ariaLabel | string | label 값 | 스크린리더용 접근성 라벨(미지정 시 label 사용). |