Toast

Stackable notifications with a left accent bar. Triggered from JavaScript. Auto-dismisses after a timeout of your choice.

Live demo

<div class="toast-container toast-container--top-right" role="region" aria-label="Notifications">
  <div class="toast toast--success" role="status">
    <span class="toast__icon">✓</span>
    <div class="toast__body">
      <p class="toast__title">Saved</p>
      <p class="toast__message">Your changes are live.</p>
    </div>
    <button class="toast__close" aria-label="Dismiss">×</button>
  </div>
</div>

Tones (static preview)

Info

An informational message.

✓

Success

Operation completed.

Warning

Requires your attention.

Error

Something went wrong.

<div class="toast toast--info"    role="status">…</div>
<div class="toast toast--success" role="status">…</div>
<div class="toast toast--warning" role="status">…</div>
<div class="toast toast--error"   role="alert">…</div>

Modifiers

Class	Effect
`.toast-container`	Fixed container. Position via modifier below.
`.toast-container--top-right`	Top-right corner (default).
`.toast-container--top-left`	Top-left corner.
`.toast-container--top-center`	Top, horizontally centered.
`.toast-container--bottom-right`	Bottom-right corner.
`.toast-container--bottom-left`	Bottom-left corner.
`.toast-container--bottom-center`	Bottom, horizontally centered.
`.toast`	Single toast.
`.toast--info / --success / --warning / --error`	Tonal left accent bar.
`.toast--dismissing`	Triggers exit animation before removal.
`.toast__icon / __body / __title / __message / __close`	Sub-elements.