컴포넌트
ButtonLoadingSwap
클릭하면 버튼 라벨이 회전 스피너로 전환되고 로딩이 끝나면 성공 체크를 거쳐 원래 라벨로 되돌아오는 로딩 버튼.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ButtonLoadingSwap-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | 저장하기 | 기본(대기) 상태에 표시되는 버튼 라벨 |
| successLabel | string | 완료됨 | 로딩 완료 후 성공 단계에서 잠시 표시되는 라벨(showSuccess=true일 때) |
| loadingDuration | number | 1600 | 스피너 로딩 상태를 유지하는 시간(ms). 이 시간 뒤 성공/대기로 복귀 |
| showSuccess | boolean | true | 로딩 종료 후 성공(체크) 상태를 거칠지 여부 |
| successDuration | number | 1100 | 성공 상태 유지 시간(ms). showSuccess=true일 때만 사용 |
| disabled | boolean | false | 버튼 비활성화 여부 |