CodingLaboratory
Lab Commands
Enter The Lab

Component Lab / feedback-overlays / stacked-undo-banner

Stable release
Back to category

Open experiment

Stacked undo banner

Queues several reversible actions with independent countdown rails and a clear undo target. Cycle selects an action; undo reverses it and updates remaining history without autoplay loss. Shows multiple reversible operations with explicit history rather than one toast undo.

Lab tested Responsive Dark mode Interactive
Version
1.0.0
Updated
2026-08-02
Dependencies
Zero
Live canvasInstant token updates
Source filesEditable and export-ready
<section class="cmp-stacked-undo-banner cmp-atlas" data-state="idle" data-variant="0">
  <div class="cmp-atlas__feedback-scene" aria-hidden="true"><i></i><i></i><i></i><b>37</b></div>
  <div class="cmp-atlas__feedback-copy">
    <span>Banners</span>
    <h3>Stacked undo banner</h3>
    <p>
      Queues several reversible actions with independent countdown rails and a clear undo target.
    </p>
  </div>
  <div class="cmp-atlas__choices">
    <button type="button" data-choice="0" aria-pressed="true">Inspect</button
    ><button type="button" data-choice="1" aria-pressed="false">Resolve</button
    ><button type="button" data-choice="2" aria-pressed="false">Archive</button>
  </div>
  <div class="cmp-atlas__feedback-actions">
    <button
      type="button"
      class="cmp-atlas__primary"
      data-primary
      data-active-label="State updated"
      aria-pressed="false"
    >
      Run interaction</button
    ><button type="button" data-choice="3" aria-pressed="false">Details</button>
  </div>
  <p data-status aria-live="polite">Ready · Escape resets the demo</p>
</section>
No runtime reactions detected Open in Editor

Validated in the lab

Experiment report

  • Schema and source files passed
  • Responsive test passed
  • Keyboard test passed
  • No console errors

Component ingredients

Dependencies
None
Browser support
Current Chrome, Current Edge, Current Firefox, Current Safari
Version
1.0.0
Last tested
2026-08-02

Accessibility notes

  • Every interactive target is a labelled native control with a visible focus treatment.
  • State changes are communicated through a polite text status and never by color alone.
  • The contained visual effects stop when the user requests reduced motion.

License: MIT License for open-source use, modification, and distribution.