Components · Feedback

Toast

우하단 잠시 떠 있는 알림. status dot으로 의미 표시 — 기본(sky) · positive · warning · negative.

Preview

새 메시지가 도착했습니다.
신청서가 성공적으로 제출되었습니다.
이메일 인증이 필요합니다.
네트워크 연결을 확인해주세요.

Usage

<div class="toast-stack">
  <div class="toast is-positive">
    <span class="tst-dot"></span>
    저장되었습니다.
  </div>
</div>

Rules

DO

  • 의미별 색상 (positive·warning·negative).
  • 자동 사라짐 3~5초.

DON'T

  • 치명적 오류는 Toast 대신 Modal로.
  • 한 화면에 4개 이상 동시 표시 금지.