Session State Patterns

Timeout Warning

A session-expiring warning shows a pinned 5 minute countdown, an Extend session button, and no timer/backend note.

Program

Timeout warnings should give people a clear countdown and next action. This lesson uses a fixed countdown and runs no timer.

session_timeout_warning.html
Visuals: captured from real browser rendering
<section class="timeout-warning" data-session-state="expiring">
  <h2>Session expiring</h2>
  <p role="status">Your session expires in <strong>5 minutes</strong>.</p>
  <button type="button" aria-describedby="timeout-note">Extend session</button>
  <p id="timeout-note">No timer or backend request runs in this lesson.</p>
</section>
<style>
  .timeout-warning { display: grid; gap: 10px; max-width: 30rem; border: 1px solid #b45309; padding: 12px; background: #fff7ed; }
  .timeout-warning button { justify-self: start; padding: 8px 12px; }
  #timeout-note { margin: 0; color: #475569; }
</style>

  1. Pin the expiring state.

    The warning starts from a deterministic expiring session state.
    The warning starts from a deterministic expiring session state.

  2. Name the warning.

    The heading tells people the session is expiring.
    The heading tells people the session is expiring.

  3. Show the pinned countdown.

    The countdown is fixed at 5 minutes.
    The countdown is fixed at 5 minutes.

  4. Add the extend affordance.

    The button gives a visible action without running a backend request.
    The button gives a visible action without running a backend request.

  5. State what does not run.

    The note says no timer or backend request runs.
    The note says no timer or backend request runs.

  6. Check the timeout warning.

    The warning has a pinned countdown, button, and no-backend note.
    The warning has a pinned countdown, button, and no-backend note.
expiring state The UI can show a session that is about to expire.
pinned countdown The countdown value is fixed lesson data.
no timer The lesson should not imply a timer or backend extension ran.