컴포넌트
Button Success Check
클릭 시 로딩 스피너에서 성공 체크마크로 부드럽게 모프되는 상태 전환 버튼.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ButtonSuccessCheck-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "제출하기" | 대기(idle) 상태에 표시되는 버튼 라벨 |
| successLabel | string | "완료됨" | 성공 상태에서 스크린리더/aria에 통지되는 라벨 |
| onAction | () => Promise<boolean> | undefined | 클릭 시 실행할 비동기 작업. true 반환 시 성공, false 시 대기 상태로 복귀. 미지정 시 mockDelay 후 자동 성공 |
| mockDelay | number | 1500 | onAction 미지정 시 사용하는 가짜 로딩 시간(ms) |
| resetDelay | number | 2000 | 성공 상태 유지 후 자동으로 idle로 복귀하기까지의 시간(ms) |
| className | string | undefined | 버튼 요소에 추가할 커스텀 클래스명 |