컴포넌트
ButtonExpandIcon
평소 아이콘만 보이다가 호버/포커스 시 라벨로 부드럽게 가로 확장되는 브랜드 그라디언트 버튼입니다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ButtonExpandIcon-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "다운로드" | 확장 시 표시되는 라벨 텍스트 |
| icon | "plus" | "download" | "heart" | "search" | "share" | "download" | 버튼에 표시할 인라인 SVG 아이콘 종류 |
| expandDirection | "right" | "left" | "right" | 라벨이 아이콘 기준 오른쪽/왼쪽 중 어디로 펼쳐질지 |
| size | number | 52 | 아이콘 영역(정사각) 크기(px), 최소 36 보장 |
| accentColor | string | "#C084FC" | 테두리/글로우 베이스 강조 색상 |
| onPress | () => void | undefined | 버튼 클릭 시 호출되는 콜백 |