컴포넌트
ButtonShimmer
클릭하면 로딩(스켈레톤) 상태로 전환되어 좌→우 shimmer 밴드가 흐르고, 일정 시간 뒤 완료 체크로 바뀌었다가 자동 복귀하는 버튼.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ButtonShimmer-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "제출하기" | 대기 상태 버튼 라벨 |
| loadingDuration | number | 1800 | 클릭 후 스켈레톤(로딩) 상태를 유지하는 시간(ms) |
| doneDuration | number | 1400 | 완료 상태를 유지한 뒤 대기 상태로 복귀하기까지의 시간(ms) |
| shimmerSpeed | number | 1200 | shimmer 밴드가 1회 통과하는 시간(ms). 작을수록 빠르게 흐름 |
| tone | "violet" | "pink" | "mint" | "violet" | 강조 색상 테마(브랜드 컬러 페어) |
| onComplete | () => void | undefined | 로딩이 끝나 완료 상태로 전환될 때 호출되는 콜백 |