A list or dashboard screen: status at the top, a toolbar for view mode and actions, and a modal for a focused task. Wire data-button-group-live and data-modal-open as on the component pages.
When to use it
- Admin tables, project lists, or settings where users switch view and run batch actions.
- The modal holds a short form or confirmation without leaving the page.
- Use Alerts for inline status; reserve Modals for multi-field or blocking tasks.
Recipe
- Place an
.alertunder the page title for context (counts, warnings). - Add a horizontal row:
.btn-groupfor view toggles + primary/secondary.btnactions. - Render list/table content below the toolbar.
- Keep the
.modalroot in the DOM withhidden; open viadata-modal-open. - Call
wireAllButtonGroups()andwireAllModals()after load (see reference scripts below).
Live demo
Copy markup
<section class="page-panel" aria-labelledby="panel-title">
<h1 id="panel-title" class="heading-h3">Projects</h1>
<div class="alert alert--information alert--with-icon" role="status">
<span class="alert__icon" aria-hidden="true">…</span>
<div class="alert__content">
<p class="alert__title">3 drafts pending review</p>
<p class="alert__body">Export or archive from the toolbar.</p>
</div>
</div>
<div class="toolbar-row">
<div class="btn-group" role="group" aria-label="View" data-button-group-live=""><button type="button" class="btn-group__item btn-group__item--selected" aria-pressed="true">List</button><button type="button" class="btn-group__item" aria-pressed="false">Grid</button></div>
<button type="button" class="btn btn--primary" data-modal-open="export-modal">Export</button>
</div>
<div class="modal" id="export-modal" data-modal-live="" hidden="">…</div>
</section>Behavior (reference)
// See docs-site/src/lib/button-group-behavior.ts (single-select, radiogroup, optional multi-toggle).import { wireAllModals } from './modal-behavior';
document.addEventListener('DOMContentLoaded', () => wireAllModals());