Components / Feedback & Status / Toast

Toast stable

Slides in at the bottom right and fades after a few seconds — for saves and sends.

Preview

Uses: Button — include its CSS alongside this one.

<button class="btn btn-sec btn-md" data-toast-demo>Show toast</button>
<div class="toasts" data-toasts></div>

.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:9px;z-index:99;font-family:var(--k-font)}
.toast{display:flex;gap:11px;align-items:flex-start;background:var(--k-ink);color:var(--k-toast-ink);border-radius:12px;padding:13px 16px;font-size:13.5px;box-shadow:0 20px 44px -14px rgba(0,0,0,.45);animation:k-tin .3s cubic-bezier(.3,1.2,.4,1);max-width:320px}
.toast small{display:block;color:var(--k-toast-sub);margin-top:2px;font-size:12px;line-height:1.6}
@keyframes k-tin{from{opacity:0;transform:translateY(10px) scale(.97)}}

const toasts = document.querySelector('[data-toasts]');
function toast(title, sub){
  const el = document.createElement('div');
  el.className = 'toast';
  el.innerHTML = '<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#34d399" stroke-width="2.4" stroke-linecap="round" style="flex:none;margin-top:1px"><path d="M4 12.5l5 5L20 6.5"/></svg><span><b>' + title + '</b>' + (sub ? '<small>' + sub + '</small>' : '') + '</span>';
  toasts.appendChild(el);
  setTimeout(() => { el.style.transition = 'opacity .3s'; el.style.opacity = '0'; setTimeout(() => el.remove(), 320); }, 4000);
}
document.querySelector('[data-toast-demo]').addEventListener('click', () => toast('Saved', 'Your draft is synced automatically.'));

Usage

Confirm completed actions. Never put errors that need action into a toast.

Accessibility

Announces via a polite live region in the full version; auto-dismiss never hides critical information.

Spinner

Avatar