Toast

Overview

Toasts provide feedback for user-initiated actions. They should be brief, clear, and not require user interaction to dismiss (though a close button is always provided). Use toasts for system feedback — not for critical errors that require user action (use a modal for those).

Max 3 toasts: When a 4th toast would appear, the oldest is removed first. This prevents the screen from being overwhelmed with notifications.

Variants

User Added

Budi Santoso has been successfully added.

Error

Failed to save changes. Please try again.

Warning

Location data is 15 minutes old.

Info

Showing data for the last 6 months.

/* Toast container — position fixed, bottom-right */
<div id="toastContainer"
  style="position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px">
</div>

/* JS function to show toast */
function showToast(type, title, msg) {
  const icons = {
    success: '<svg...checkmark...>',
    error:   '<svg...x-circle...>',
    warning: '<svg...triangle...>',
    info:    '<svg...info-circle...>'
  };
  const id = 'toast-' + Date.now();
  const el = document.createElement('div');
  el.className = `toast toast-${type} toast-enter`;
  el.id = id;
  el.innerHTML = `${icons[type]}
    <div class="toast-body">
      <div class="toast-title">${title}</div>
      <div class="toast-msg">${msg}</div>
    </div>
    <button class="toast-close" onclick="this.closest('.toast').remove()">&#x2715;</button>`;
  document.getElementById('toastContainer').appendChild(el);
  setTimeout(() => el.remove(), 4000);
}

Token Reference

Type	Left Border Color	Icon Color	Use For
success	#0E9F6E	#0E9F6E	Saved, created, approved, completed
error	#F05252	#F05252	Failed operations, system errors
warning	#E3A008	#E3A008	Stale data, non-critical issues
info	#6366F1	#6366F1	Informational, context, announcements

AI Implementation Notes

For AI coding assistants: The toast container is position:fixed; bottom:24px; right:24px; z-index:9999. Toasts are appended to the container via JS — never hardcoded in HTML. The left border accent is set via border-left, NOT border-left-color on the base class. Icons are always inline SVG matching the type color. Auto-dismiss uses setTimeout(4000). Max 3: when count exceeds 3, remove container.firstChild first.

When to Use

Use Toast when

Confirming a user action completed (saved, deleted, sent)
Non-blocking system notifications
Brief error feedback after async operations
Progressive disclosure of background process results

Don't use Toast when

Critical errors requiring user action — use Alert banner or Modal
Persistent information — toasts auto-dismiss
Displaying more than 2 sentences of content
Replacing form validation messages

Properties

Property	Type	Required	Default	Description
type	string	required	—	Semantic type. Controls left border color and icon. 'success' \| 'error' \| 'warning' \| 'info'
title	string	required	—	Bold heading. 13px fw-700. Keep to 2–4 words.
message	string	optional	undefined	Supporting detail. 12px #64748B. Max 1 sentence.
duration	number	optional	4000	Auto-dismiss delay in ms. Set to 0 to disable auto-dismiss.

Behavior

Trigger	Behavior
Show	Append to #toastContainer. Animate in (fadeUp 0.3s). Increment counter.
Stack limit (3)	When count reaches 3, remove oldest toast before adding new one.
Auto-dismiss	setTimeout(4000ms) then el.remove(). Counter decrements.
Close button	× button removes toast immediately. Counter decrements.

Design Decisions

Why bottom-right positioning?

Bottom-right is the established convention for toast notifications (popularized by macOS system notifications, Windows Action Center). Users have learned to expect non-critical feedback there. It avoids interrupting the primary content area (center/top) and stays out of the way of navigation (left sidebar, top bar).

Why a maximum stack of 3?

More than 3 toasts creates visual noise that users will start ignoring or dismissing hastily. Capping at 3 forces the system to prioritize — the oldest, least relevant toast is removed when a new one arrives.

Changelog

v1.0.0July 2026Added

4 semantic types with matching left border and icon colors
Stack limit of 3 with FIFO removal
4000ms auto-dismiss with manual close button
fadeUp entrance animation

States

Saved

Changes saved successfully.

Success

Left border #0E9F6E

Error

Action failed.

Error

Left border #F05252

Warning

Check your settings.

Warning

Left border #E3A008

Info

System updated.

Info

Left border #6366F1

Accessibility

Requirement	Implementation
aria-live	Toast container: aria-live="polite" for success/info/warning. aria-live="assertive" for errors.
aria-atomic	Add aria-atomic="true" to toast container.
Focus	Toasts do not steal focus. They are purely informational announcements.

Composition

Allowed

Bottom-right fixed container

Stacked max 3 at once

Auto-dismiss after 4000ms

Forbidden

Toasts as replacement for form validation

More than 3 visible at once

Toasts requiring user interaction before dismissal

Best Practices

Show success toast after every completed async action to confirm the operation succeeded.

Users need feedback that their action was processed.

Don't

Use error toast as the only error feedback for form validation.

Form errors belong inline next to the fields, not as toasts.

Anatomy

Container

div.toast.toast-{type}. bg:#fff, border:1px solid #E2E8F0, border-left:4px solid {semantic-color}, border-radius:14px, box-shadow:shadow-toast.

Icon

Inline SVG, 18px. Color matches the semantic type color (#0E9F6E / #F05252 / #E3A008 / #6366F1). flex-shrink:0.

Content

div.toast-body. Title (13px fw-700) + message (12px #64748B). Title required, message optional.

Close Button

button.toast-close. × character, position:absolute top-right. Removes toast immediately on click.

Content Rules

Good toast title