Toast
MSK Toast는 저장 완료, 실패, 경고 같은 짧은 작업 결과를 화면 흐름을 막지 않고 보여주는 primitive입니다.
메시지는 textContent로만 렌더링하며, 복잡한 내용이나 액션이 필요한 경우에는 dialog 또는 popover로 분리합니다.
Preview
버튼을 눌러 toast를 확인하세요.
Data API
<button
type="button"
data-msk-toast-message="저장되었습니다."
data-msk-toast-type="success"
>
저장 알림
</button>
JavaScript API
window.MSK.ui.toast.show('저장되었습니다.', {
type: 'success',
duration: 4200,
position: 'top-right',
});
Options
| 옵션 | 기본값 | 설명 |
|---|---|---|
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을 사용합니다.