Selection bar

The bar over a list that shows when rows are checked: how many, and what can be done with all of them at once.

Examples

Plain buttons in the bar take its tint; the one suggested action stays btn-subtle-primary, and clearing the selection is a quiet icon button at the end.

2 selected

<div class="selection-bar" role="region" aria-label="Selected excursions">
	<strong>2 selected</strong>
	<button class="btn btn-sm" type="button"><i class="bi bi-send" aria-hidden="true"></i>Publish</button>
	<button class="btn btn-sm" type="button"><i class="bi bi-eye-slash" aria-hidden="true"></i>Withdraw</button>
	<button class="btn btn-sm btn-subtle-primary" type="button"><i class="bi bi-stars" aria-hidden="true"></i>Translate what changed</button>
	<button class="btn btn-sm ms-auto" type="button"><i class="bi bi-trash3" aria-hidden="true"></i>Delete…</button>
	<button class="btn btn-sm btn-icon btn-text" type="button" aria-label="Clear the selection"><i class="bi bi-x" aria-hidden="true"></i></button>
</div>

Accessibility

The bar is a region named after the list; its count says what is selected.
An action that removes asks first - its words end in “…” and it opens a confirmation.

Tokens

From css/components/selection-bar.css. It declares --redz-btn-bg on its root, never on rows or items.

It reads the theme's --redz-space-8, --redz-space-16, --redz-border, --redz-primary-subtle, --redz-bg.