Toast

MSK Toast는 저장 완료, 실패, 경고 같은 짧은 작업 결과를 화면 흐름을 막지 않고 보여주는 primitive입니다. 메시지는 textContent로만 렌더링하며, 복잡한 내용이나 액션이 필요한 경우에는 dialog 또는 popover로 분리합니다.

Preview

버튼을 눌러 toast를 확인하세요.

<button
  type="button"
  data-msk-toast-message="저장되었습니다."
  data-msk-toast-type="success"
>
  저장 알림
</button>

window.MSK.ui.toast.show('저장되었습니다.', {
  type: 'success',
  duration: 4200,
  position: 'top-right',
});

옵션	기본값	설명
`type`	`info`	`info`, `success`, `warning`, `danger`
`duration`	`4200`	자동 닫힘 시간(ms), `0`이면 자동 닫힘 없음
`position`	`top-right`	`top-right`, `top-left`, `bottom-right`, `bottom-left`
`dismissLabel`	`Dismiss`	닫기 버튼 접근성 label

danger는 role="alert"와 assertive live region을 사용합니다.