Button

MSK Button은 저장, 삭제, 제출 같은 명령 버튼의 공통 상태를 다루는 Core UI Kit primitive입니다. 초기 구현 범위는 비동기 작업 중 중복 클릭을 막고, 버튼 크기를 유지한 채 spinner와 진행 문구를 보여주는 busy state입니다.

Preview

아래 미리보기는 운영 문서 Docker build context 안에서 동작하는 preview입니다. 실제 제품 구현 SOT는 platform/web/laravel/core/Base/UiKit/입니다.

Busy state작업 중 버튼 폭은 유지되고, 중복 클릭은 native disabled로 차단됩니다.

<button
  type="submit"
  data-msk-button
  data-msk-busy-text="저장 중..."
>
  저장
</button>

클릭 즉시 busy 상태로 고정해야 하는 단순 submit 버튼은 다음 속성을 사용할 수 있습니다.

<button
  type="submit"
  data-msk-button
  data-msk-busy-on="click"
  data-msk-busy-text="저장 중..."
>
  저장
</button>

await window.MSK.ui.button.withBusy(button, async () => {
  await saveForm();
}, {
  busyText: '저장 중...',
});

window.MSK.ui.button.setBusy(button, true, {
  busyText: '처리 중...',
});

window.MSK.ui.button.setBusy(button, false);

상태	동작
Busy 시작	`data-msk-busy="true"`, `aria-busy="true"`, `aria-disabled="true"` 설정
Native button/input	작업 중 `disabled` 처리
Label	기존 label은 숨기고 공간은 유지
Spinner	`currentColor` 기반 spinner 표시
완료	기존 `disabled`, `aria-disabled` 상태 복원

:root {
  --msk-ui-button-spinner-size: 1em;
  --msk-ui-button-spinner-border-width: 2px;
}

버튼의 색상, 여백, radius는 각 프로젝트의 기존 버튼 CSS가 유지합니다. UI Kit은 busy 상태에 필요한 내부 label, spinner, accessibility 상태만 공통화합니다.