Unsaved Changes - Everyday Interface Patterns

A static unsaved changes notice shows Launch blockers, added filter Due this week, removed filter Archived, and Unsaved changes.

Program

Unsaved view notices should summarize what changed without pretending that a filter query, save, share, or persistence service is running.

unsaved_view_changes_notice.html

Visuals: captured from real browser rendering

<section class="unsaved-view" aria-labelledby="unsaved-view-title">
  <h2 id="unsaved-view-title">Unsaved view changes</h2>
  <dl>
    <div><dt>View</dt><dd>Launch blockers</dd></div>
    <div><dt>Added filter</dt><dd>Due this week</dd></div>
    <div><dt>Removed filter</dt><dd>Archived</dd></div>
    <div><dt>Status</dt><dd><span class="badge">Unsaved changes</span></dd></div>
  </dl>
  <button type="button">Review changes</button>
  <p class="note">Static unsaved notice only; the button does not route, save, share, apply, query, persist, or call a filter service.</p>
</section>
<style>
  .unsaved-view { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b45309; padding: 12px; background: #fffbeb; }
  .unsaved-view dl { display: grid; gap: 8px; margin: 0; }
  .unsaved-view dl div { display: grid; grid-template-columns: 9rem 1fr; gap: 8px; }
  .unsaved-view dt { color: #475569; }
  .unsaved-view dd, .note { margin: 0; }
  .badge { border-radius: 999px; background: #fef3c7; padding: 2px 8px; }
  .unsaved-view button { justify-self: start; padding: 8px 12px; }
  .note { color: #475569; }
</style>

Label the unsaved changes notice.
The section is labelled by its visible heading.
Show the view row.
The view name is exact pinned data.
Show the added filter row.
The added filter is exact pinned data.
Show the removed filter row.
The removed filter is exact pinned data.
Show the status readback.
The status is visible as a static badge.
Check unsaved changes honesty.
View, changed filters, status, button, and no persistence service.

labelled notice The section heading names the unsaved view changes surface.

change rows The added filter, removed filter, and status are exact pinned data.

no filter service The lesson should not imply saved-view APIs, filter/query APIs, sharing APIs, or persistence.