Bulk Action Bar - Everyday Interface Patterns

A static bulk action bar shows 2 selected, Archive selected, Move to folder, Clear selection, and Bulk action preview status.

Program

A bulk action bar should show available actions clearly without implying that any action has run.

bulk_action_bar_preview.html

Visuals: captured from real browser rendering

<section class="bulk-bar" aria-labelledby="bulk-bar-title"><h2 id="bulk-bar-title">Bulk action bar preview</h2><div class="action-card" aria-label="Static bulk action bar preview"><span>2 selected</span><span>Archive selected</span><span>Move to folder</span><span>Clear selection</span></div><dl>
  <div><dt>Selected</dt><dd>2 selected</dd></div>
  <div><dt>Primary action</dt><dd>Archive selected</dd></div><div><dt>Other actions</dt><dd>Move to folder, Clear selection</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Bulk action preview</span></dd></div></dl>
  <p class="check">Learner check: the action bar is visible, but no action runs.</p>
  <p class="note">Static bulk action bar preview only; no selection engine, checkbox event, click handler, keyboard handler, form submit, row mutation, bulk action execution, archive operation, move operation, delete operation, routing, navigation, route, API, network, storage, cookie, script, event listener, timer, analytics, object URL, download, service worker, account/session behavior, live table selection, live toolbar, or live submission runs.</p></section>
<style>
  .bulk-bar { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #1d4ed8; padding: 12px; background: #eff6ff; }
  .action-card { display: flex; flex-wrap: wrap; gap: 6px; justify-self: start; border: 1px solid #1d4ed8; background: #ffffff; padding: 10px; }
  .action-card span { border-radius: 999px; background: #dbeafe; padding: 3px 10px; }
  .action-card span:first-child { font-weight: 700; }
  .bulk-bar dl { display: grid; gap: 8px; margin: 0; }
  .bulk-bar dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .bulk-bar dt { color: #475569; }
  .bulk-bar dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the bulk action bar.
The section is labelled by its visible heading.
Show selected structure.
The selected count is exact pinned data.
Show action rows.
The action labels are exact pinned data.
Render bulk-action-preview status.
The status badge says this is a bulk action preview.
Check action-bar readback.
The check says the action bar is visible, but no action runs.
Check bulk action honesty.
Selected count, actions, status, and no live toolbar.

step flow step(1) labels the source, step(2) shows selected structure, step(3) shows action rows, step(4) shows bulk-action-preview status, step(5) checks action-bar readback, and step(6) checks the honesty note.

bulk action readback The section heading names the bulk action bar preview surface.

bulk action rows Selected, Primary action, Other actions, and Status values are exact pinned data.

no live action The lesson should not imply a selection engine, checkbox events, click handlers, keyboard handlers, form submits, row mutations, bulk action execution, archive, move, or delete operations, routing, navigation, routes, APIs, networks, storage, cookies, scripts, event listeners, timers, analytics, object URLs, downloads, service workers, account/session behavior, live table selection, live toolbars, or live submissions.