AnimatedButton

idle → loading → success/error 상태가 부드럽게 모핑되는 버튼. onClick이 Promise면 자동 처리, 아니면 status prop으로 외부 제어.

1. Promise 자동 모드

onClick이 Promise를 반환하면 자동으로 loading → success/error로 전환.

2. 외부 제어 모드

status prop으로 직접 제어. (Promise 자동 모드보다 우선)

3. 크기 / variant

크기

Variant

사용

import { AnimatedButton } from '@baneung-pack/ui';

// 1. Promise 자동 모드 — onClick이 Promise면 자동으로 loading → success/error
<AnimatedButton onClick={async () => await api.save()}>
  저장
</AnimatedButton>

// 커스텀 텍스트
<AnimatedButton
  loadingText="업로드 중…"
  successText="완료"
  errorText="다시 시도"
  onClick={async () => await api.upload(file)}
>
  업로드
</AnimatedButton>

// 2. 외부 제어 — status prop으로 직접
<AnimatedButton status={status} onClick={() => /* sync */}>
  제어된 버튼
</AnimatedButton>

API

AnimatedButtonProps

Property	Type	기본값	설명
children	ReactNode	—	기본 버튼 라벨.
onClick	(e) => void \| Promise<unknown>	—	Promise 반환 시 자동 loading → success/error.
status	'idle' \| 'loading' \| 'success' \| 'error'	—	외부 제어 (지정 시 자동 모드 우회).
resetMs	number	1800	success/error → idle 자동 복귀 (ms). 0이면 비활성.
variant	'primary' \| 'secondary' \| 'ghost' \| 'danger'	'primary'	색상 변형.
size	'sm' \| 'md' \| 'lg'	'md'	크기.
loadingText	ReactNode	children 유지	loading 상태 텍스트.
successText	ReactNode	아이콘만	success 상태 텍스트.
errorText	ReactNode	아이콘만	error 상태 텍스트.
disabled	boolean	false	비활성화 (loading 중에도 자동 적용).