Toast - Seventh UI CSS

Status

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Content

Review the latest changes in the release notes.

Message text is clamped to two lines to match the Figma best-practice note.

Region

Desktop toasts sit 24px from the viewport edge.

The public .sui-toast-region class is fixed-position for production usage; this page scopes it inside a demo viewport.

Behavior Notes

Figma has a source conflict: the intro says auto-close after 6 seconds, while best practices say 5 seconds. This library uses 6000ms as the documented default until clarified.

Auto-dismiss, queues, pause on hover/focus, and manual removal are owned by the consuming application or a future vanilla helper entrypoint.

CSS API

<div class="sui-toast-region">
  <div class="sui-toast sui-toast--success" role="status" aria-live="polite">
    <div class="sui-toast__progress" aria-hidden="true"></div>
    <div class="sui-toast__content">
      <span class="sui-icon sui-icon--alert-info-circle-outline sui-toast__icon" aria-hidden="true"></span>
      <div class="sui-toast__content-body">
        <div class="sui-toast__header">
          <p class="sui-toast__title">Toast</p>
          <button class="sui-toast__close" type="button" aria-label="Close toast">...</button>
        </div>
        <p class="sui-toast__description">Short contextual message.</p>
      </div>
    </div>
  </div>
</div>