컴포넌트
ButtonUnderlineSlide
hover/focus 시 밑줄이 좌→우로 슬라이드 인 되고 벗어나면 우측으로 빠지며 사라지는 그라디언트 밑줄 텍스트 버튼.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ButtonUnderlineSlide-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | 자세히 보기 | 버튼에 표시할 텍스트. |
| thickness | number | 2 | 밑줄 두께(px). 최소 1로 보정됨. |
| duration | number | 360 | 밑줄 슬라이드 인/아웃 전환 시간(ms). |
| colors | string[] | ["#C084FC","#EC4899","#5EEAD4"] | 밑줄 그라디언트 색상 배열(좌→우 순서). 1개면 단색. |
| onActivate | () => void | undefined | 클릭 또는 Enter/Space 활성화 시 호출되는 콜백. |
| ariaLabel | string | label 값 | 접근성 라벨. 미지정 시 label을 사용. |