Bulk action bars
Group contextual actions that apply to selected records.
Live preview
HTML
<div class="xsh-bulk-bar" role="group" aria-label="Selected records">
<strong>3 selected</strong>
<button class="xsh-button xsh-button--secondary xsh-button--sm" data-xsh-toast="info" data-xsh-message="Export needs an application endpoint.">Export</button>
<button class="xsh-button xsh-button--danger xsh-button--sm" data-xsh-toast="warning" data-xsh-message="Bulk delete requires confirmation.">Delete</button>
</div>Installation & markup
Include the local stylesheet and script once on the page, then place the component inside a data-xsh-ui root. The example above works without a build system.
<link rel="stylesheet" href="/dist/xshna-ui.css">
<div data-xsh-ui>
<!-- Add the HTML example above -->
</div>
<script defer src="/dist/xshna-ui.js"></script>Component API
Public classes, attributes and hooks used by this example. Keep the xsh- prefix intact.
| Identifier | Contract |
|---|---|
xsh-bulk-bar | Used by the example markup and component styles or behavior. |
role=group | Used by the example markup and component styles or behavior. |
xsh-button | Used by the example markup and component styles or behavior. |
Accessibility & keyboard
Actions are independently focusable and visibly grouped.
Implementation note. Tie count and actions to real selection state when using in an application.
Interaction contract
Behavioral components use the shared delegated runtime; visual-only primitives rely on semantic HTML and CSS. Runtime controls emit bubbling xsh:* CustomEvents; bind application handlers to those events when server persistence, API data or navigation is required.