Skip to main content

Inline Confirm

MSK Inline Confirm은 차단형 window.confirm() 대신 버튼에 앵커된 작은 확인 버블을 띄우는 primitive입니다.

Preview​

Data API​

<button
  type="button"
  data-msk-confirm="이 항목을 삭제할까요?"
  data-msk-confirm-label="삭제"
  data-msk-confirm-tone="danger"
  data-msk-confirm-submit="delete-form"
>
  삭제
</button>

data-msk-confirm-submit="<formId>"을 주면 확인 시 해당 폼을 자동 제출합니다.

Events​

button.addEventListener('msk:confirm-accept', () => doDelete());
button.addEventListener('msk:confirm-cancel', () => {});

Accessibility​

  • 버튼은 aria-haspopup="dialog" + aria-expanded, 버블은 role="dialog".
  • 확인 버튼에 자동 포커스, Esc/바깥 클릭으로 취소.
  • data-msk-confirm-tone="danger"(기본)은 위험 톤 강조.