토스트

동작이 성공했음을 잠깐 알릴 때. 사용자가 읽지 않아도 되는 정보에만 씁니다.

코드

<div class="jt-toast-area" role="status" aria-live="polite">
  <div class="jt-toast">저장했습니다</div>
</div>

하지 말 것

• 오류를 토스트로 알리지 마세요. 3초 뒤 사라지므로 사용자가 못 볼 수 있습니다. 오류는 알림이나 결과 화면으로.
• 토스트 안에 버튼을 넣지 마세요. 누르기 전에 사라집니다.

접근성

• role="status" aria-live="polite"를 감싸는 영역에 둡니다
• 3초 자동 소멸이 기본입니다

앱에서 모양 바꾸기

jt-utilities.css를 고치지 말고 아래 변수만 덮어쓰세요(컴포넌트 계약).

노브: --jt-toast-max

.my-page .jt-toast { --jt-toast-max: …; }

관련