<!-- Generated by tools/docs.php from docs/src/selection-bar.html - edit the source, not this file. -->

# 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.

```html
<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](dialog.md).

## Tokens

From [`css/components/selection-bar.css`](https://github.com/redz-tech/REDZ.UI/blob/main/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`.
