컴포넌트
ButtonIconMorph
재생 삼각형이 일시정지 막대 두 개로 SVG path 정점 보간을 통해 부드럽게 모프되는 접근성 지원 아이콘 버튼.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ButtonIconMorph-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| icon | "play-pause" | "play-pause" | 모프할 아이콘 세트 (현재 재생↔일시정지 제공). |
| theme | "violet" | "teal" | "magenta" | "violet" | 그라데이션/글로우에 쓰이는 브랜드 색상 테마. |
| defaultPressed | boolean | false | 비제어 초기 상태. true면 처음부터 일시정지(재생 중) 모양으로 시작. |
| size | number | 72 | 버튼 지름(px). 내부 SVG 아이콘 크기도 비례해서 조정됨. |
| onToggle | (pressed: boolean) => void | undefined | 토글 시 호출되는 콜백 (true=일시정지/to 상태). |