Components

Snackbar

행동 직후의 피드백을 잠깐 보여주는 토스트입니다.

저장되었습니다에이전트가 삭제되었습니다 실행 취소
코드 보기
<div class="tn-snack">저장되었습니다 <a>실행 취소</a></div>
/* 하단 중앙 고정 · 3초 후 자동 소멸 */

Variants

이름설명미리보기
기본메시지만저장되었습니다
액션실행 취소 링크 포함삭제됨 실행 취소

Guidelines

✓ Do
  • 3초 후 자동 소멸
  • 한 번에 1개만 (새 메시지가 이전 것을 교체)
  • 실행 취소가 가능하면 반드시 제공
✕ Don't
  • 오류의 유일한 통보 수단으로 쓰지 않는다 (Callout 병행)
  • 확인 버튼을 넣지 않는다

Specification

속성토큰/값비고
배경var(--foreground) 반전
radius8px
표시3s / 하단 중앙

비교

Snackbar vs Callout — Snackbar는 지나가는 피드백, Callout은 남아있는 안내.