Toast

<div style="position:relative;display:flex;flex-direction:column;gap:var(--p234-space-3);max-width:26rem">
  <div class="p234-toast p234-toast--success">
    <span class="p234-toast__mark">&#10003;</span>
    <span>Saved to your account</span>
    <button class="p234-toast__action" type="button">Undo</button>
  </div>
  <div class="p234-toast p234-toast--error">
    <span class="p234-toast__mark">&#9888;</span>
    <span>Could not save. Check your connection and try again.</span>
    <button class="p234-toast__action" type="button">Retry</button>
  </div>
  <div class="p234-toast">
    <span class="p234-toast__mark">&#8212;</span>
    <span>Link copied</span>
  </div>
</div>

It must be announced

A toast nobody can see is a toast nobody gets. The container is a live region, so the message reaches a screen reader as well as the screen.

<div class="p234-toast-region" role="status" aria-live="polite">
  <!-- toasts are inserted here -->
</div>

Use aria-live="polite" for confirmations and role="alert" for failures, which interrupts. The region exists in the page from the start: inserting the region and the message together often means the message is never announced.

Rules

• One line. If it needs two sentences it is not a toast, it is an error on the page.
• Give a destructive action an Undo, and keep the toast up long enough to use it.
• Dismiss confirmations after about five seconds. Leave failures until they are dismissed.
• Keep it at the bottom on mobile, away from the thumb's resting place but above the fold.

• Do not use a toast for a form error. The error belongs beside the field that caused it.
• Do not stack more than three. Replace the oldest.
• Do not put anything above it in the layering scale. It is the top layer.
• Do not use it for anything the reader must act on. It disappears.

Where it is used

Save and follow, copy link, newsletter signup, and failures from any of those. These are the small confirmations that make the account features feel like they worked, which matters when retention is the problem being solved.