Components / New

Toast

A short, passing message about the result of an action. It never blocks the screen and disappears on its own.행동의 결과를 짧게 알리고 지나가는 메시지입니다. 화면을 막지 않고 스스로 사라집니다.

Try it직접 띄워 보기

Toasts rise from the bottom with a snappy spring and stack up to three.토스트는 아래에서 snappy 스프링으로 올라오며 최대 3개까지 쌓입니다.

Live previewDYNGLE UI

Anatomy구조

Connection removed연결을 삭제했어요Undo되돌리기

1
Container컨테이너
Inverse surface in a pill shape, so it reads on any background.반전 색 표면의 pill 형태로, 어떤 배경 위에서도 읽힙니다.
2
Status dot상태 점
Lime for neutral and success, red for failure.일반, 성공은 라임, 실패는 빨강입니다.
3
Message메시지
One sentence about what happened, in a friendly tone.무슨 일이 있었는지 한 문장으로, 친근하게.
4
Action (optional)행동 (선택)
One short action such as Undo. Never the only way to do it.실행 취소 같은 짧은 행동 하나. 유일한 수단이 되어선 안 됩니다.

Markup

HTML

<div role="status" aria-live="polite">
  <div class="dy-toast">
    Connection removed
    <button class="dy-toast-action">Undo</button>
  </div>
</div>

<div class="dy-toast critical">Couldn't save. Try again.</div><div role="status" aria-live="polite">
  <div class="dy-toast">
    연결을 삭제했어요
    <button class="dy-toast-action">되돌리기</button>
  </div>
</div>

<div class="dy-toast critical">저장하지 못했어요. 다시 시도해 주세요.</div>

Usage사용 가이드

One short sentence짧은 한 문장

Do권장

Say what happened in one sentence. Offer Undo for actions that remove something.무슨 일이 있었는지 한 문장으로 말합니다. 무언가 지우는 행동에는 되돌리기를 제공합니다.

Don't지양

Don't put long explanations, several actions, or anything people must read in a toast.긴 설명, 여러 행동, 반드시 읽어야 하는 내용을 토스트에 넣지 않습니다.

Errors that need action stay조치가 필요한 오류는 남겨 두기

Do권장

Show form errors next to the field, where they stay until fixed.폼 오류는 해당 필드 옆에 표시해, 고칠 때까지 남겨 둡니다.

Don't지양

Don't report an error people must fix only in a toast that vanishes after a few seconds.사용자가 고쳐야 하는 오류를 몇 초 뒤 사라지는 토스트로만 알리지 않습니다.

Timing & behavior시간과 동작

Item항목	Rule규칙
Duration노출 시간	About 3 seconds; 6 seconds or more when there's an action약 3초, 행동이 있으면 6초 이상
Stack쌓임	Up to three; the oldest leaves first최대 3개, 오래된 것부터 사라짐
Position위치	Bottom center, above the safe area on mobile하단 중앙, 모바일은 안전 영역 위
Motion모션	Enter with spring.snappy; exit with a 160ms fadespring.snappy로 등장, 160ms 페이드로 퇴장
Accessibility접근성	Rendered in a role="status" region with aria-live="polite"role="status", aria-live="polite" 영역에 렌더링

#Try it직접 띄워 보기

#Anatomy구조

#Markup

#Usage사용 가이드

#One short sentence짧은 한 문장

#Errors that need action stay조치가 필요한 오류는 남겨 두기

#Timing & behavior시간과 동작