Open experiment
Avatar presence stack
A compact people-presence primitive built from initial avatars and status markers. Each avatar has a full accessible name; the overflow control opens a focused roster and closes cleanly on Escape.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<section class="cmp-presence-stack" aria-labelledby="cmp-presence-title">
<header>
<div>
<span>Design room</span>
<h2 id="cmp-presence-title">5 people collaborating</h2>
</div>
<i aria-hidden="true"></i>
</header>
<div class="cmp-presence-stack__row">
<button type="button" aria-label="Mina Hassan, online" data-tip="Mina · online">
<span>MH</span><i data-online></i>
</button>
<button type="button" aria-label="Noah Lee, online" data-tip="Noah · online">
<span>NL</span><i data-online></i>
</button>
<button type="button" aria-label="Ari Stone, away" data-tip="Ari · away">
<span>AS</span><i></i>
</button>
<button
type="button"
aria-label="Open list of 2 more collaborators"
aria-expanded="false"
data-more
>
<span>+2</span>
</button>
</div>
<div class="cmp-presence-stack__popover" hidden>
<strong>Also in this room</strong>
<ul>
<li>
<span>JK</span>
<p>Jules Kim <small>Online</small></p>
</li>
<li>
<span>RE</span>
<p>Rami El-Sayed <small>Away</small></p>
</li>
</ul>
</div>
</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
- Each avatar control includes the person name and current presence.
- Color status dots are backed by accessible text.
- Escape closes the overflow roster and restores focus to its trigger.
License: MIT License for open-source use, modification, and distribution.