컴포넌트
ButtonArrowSlide
호버/포커스 시 화살표가 좌측에서 슬라이드인 되고 라벨이 밀려나는 순수 CSS 인터랙션 버튼.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ButtonArrowSlide-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "자세히 보기" | 버튼에 표시할 라벨 텍스트. |
| direction | "right" | "left" | "right" | 화살표 방향. right는 전진(오른쪽), left는 뒤로(왼쪽) 향하며 배치도 반전된다. |
| accentColor | string | "#C084FC" | 화살표/테두리/글로우/포커스 링에 쓰이는 강조 색상. |
| duration | number | 320 | 슬라이드인 및 라벨 이동 전환 지속 시간(ms). reduced-motion 시 0으로 처리. |
| disabled | boolean | false | true면 상호작용과 애니메이션을 차단하고 비활성 스타일을 적용한다. |
| onPress | () => void | undefined | 클릭 또는 Enter/Space 키 입력 시 실행되는 콜백. |