Skip to content
7 Seventh UI VanillaJS Runtime playground

Component runtime

Toast

Toast enhances Seventh UI toast markup with live-region attributes, visible state, manual dismissal, configurable auto-dismiss timers, hover/focus pause, lifecycle events, and cleanup.

Playground

The first toast is persistent until dismissed. The second uses an auto-dismiss timer that pauses while hovered or focused.

Profile saved

Manual dismissal emits cancellable lifecycle events.

Sync running

This toast dismisses itself unless interaction pauses the timer.

Hooks

Toast markup can be present at initialization or added later and initialized with app.refresh().

Hook Role
data-sui-toast-region Notification container that receives live-region attributes.
data-sui-toast Toast item initialized with state, timers, pause behavior, and cleanup.
data-sui-toast-dismiss Keyboard-accessible control that dismisses the owning toast.
data-sui-duration or data-sui-toast-duration Auto-dismiss duration in milliseconds. Use 0 or data-sui-persistent to keep the toast open.
data-sui-pause-on-hover / data-sui-pause-on-focus Optional per-toast timer pause flags. Both are enabled by default.
data-sui-toast-live="assertive" Escalates a region from polite status announcements to assertive alert announcements.

Events

Dismiss before events are cancellable. Dismiss events include the reason: manual or timeout.

sui:toast:show
sui:toast:before-dismiss
sui:toast:dismiss

Markup

<div class="sui-toast-region" data-sui-toast-region>
  <article class="sui-toast" data-sui-toast data-sui-duration="5000">
    <div class="sui-toast__content">
      <div class="sui-toast__content-body">
        <h3 class="sui-toast__title">Profile saved</h3>
      </div>
      <button class="sui-toast__close" data-sui-toast-dismiss>
        Close
      </button>
    </div>
  </article>
</div>