Design Atlas
한국어
▣ UI components

Toast

토스트

A brief status message that appears in a corner of the screen and dismisses itself after a few seconds.

Also known as: SnackbarNotificationToast notification
···
html
<div class="app-bg"><div class="bar" style="width:65%"></div><div class="bar" style="width:44%"></div><div class="bar" style="width:80%"></div></div>
<div class="toast" id="tst" role="status" aria-live="polite"><span class="dot"></span>저장되었습니다</div>
css
.app-bg{position:absolute;inset:0;padding:16px;display:grid;gap:10px;align-content:start}
.bar{height:10px;border-radius:5px;background:var(--line)}
.toast{position:absolute;left:50%;bottom:16px;transform:translate(-50%,140%);display:flex;align-items:center;gap:8px;
  background:var(--fg);color:var(--bg);padding:9px 16px;border-radius:999px;font-size:12px;font-weight:600;
  box-shadow:0 10px 26px rgba(0,0,0,.28);transition:transform .32s cubic-bezier(.2,.9,.3,1.2)}
.toast[data-open]{transform:translate(-50%,0)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent-3, #18c29c)}
js
const t = document.getElementById('tst');
function loop() {
  t.setAttribute('data-open', '');
  setTimeout(() => { t.removeAttribute('data-open'); setTimeout(loop, 900); }, 2200);
}
loop();

Use it to report the result of an action just taken — "Saved," "Failed to send." role="status" aria-live="polite" lets a screen reader announce it without interrupting whatever it's currently reading; use aria-live="assertive" for something urgent like an error.

Easy to confuse with a banner. A banner is pinned to the top of the page and stays until the user dismisses it ("Scheduled maintenance tonight"), while a toast is one-off feedback that clears itself within seconds. Auto-dismissing a banner like a toast means people won't finish reading it; leaving a toast up like a banner blocks the screen.

WCAG guidance suggests at least 5 seconds before auto-dismiss. Stack multiple toasts and push older ones up as new ones arrive.