Toast

A notification surface inside a positioned list. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• toast, toast-list, toast-motion, toast--top, toast--middle, toast--bottom

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<span class="sr-only" role="status">Changes saved.</span>
<div class="toast">
  <ul class="toast-list">
    <li class="toast-motion" data-state="open">
      <div class="alert">
        <span aria-hidden="true">Changes saved.</span>
        <button class="btn" type="button">Dismiss</button>
      </div>
    </li>
  </ul>
</div>

Variants and composition

toast–top, –middle, and –bottom choose block placement. toast-list stacks notifications; toast-motion styles entry/exit state.

Behavior and accessibility

Put message text in a stable live region but leave its dismiss button outside that region. The application owns timers, dismissal, focus behavior, and announcing only new messages.

Reference

See the interactive Storybook specimen ↗. Continue to Toggle or return to the Official preset overview.