Components › Records & data › Table › Bulk action bar

Bulk action bar

canon

Floating pill at the bottom of a table or list once rows are selected: count, actions, ⋮ for the rest and × to clear; folds to one inline action on phones.

Beta 5 Oct 2026 (acrm !4743): one implementation everywhere (Lidé, Firmy, Segment, Pipeline table, Datamart, Komunikace). Phone (≤ 720 px) folding into ⋮, × always visible, page FAB hidden, Esc clears selection everywhere. Dev check 5 Oct 2026 at 390: Lidé '3 vybráno · Vytvořit obchod · ⋯ · ×', FAB hidden. Open: overflow trigger uses dots (⋯) — align with canon dots-vertical in the record-actions-menu wave. Canon after that wave. Owner approved 11 Oct 2026 (item 17 c, acrm !4961, prototype proto/bulkbar-mobile@d457d2c90): on the phone „Vybrat všech N" is the first item in ⋮ (divider, actions, divider, Koš last; gone when all selected); the bar hides under an open sheet or modal dialog at every width; one rule in bulk-bar.css. Dev check 11 Oct (Komunikace, 360/390 light/dark): × inside the bar (309 < 316 / 324 < 331), ⋮ order as approved, bar hidden under the sheet. ⋮ tap target 43×43 (as prototype). Dev check 19 Oct 2026 (Lidé, real data): 1440 light/dark bar '2 vybráno · Vytvořit obchod · Změnit vlastníka · Exportovat · Smazat', 390 dark '2 vybráno · Vytvořit obchod · ⋮ · ×' (⋮ = dots-vertical, menu Změnit vlastníka · Exportovat · Smazat), FAB hidden, brown 0. Blocker for canon: Esc does not clear the selection when focus is on a row checkbox (BulkActionBar Esc guard skips every input, incl. type=checkbox) — contradicts a11y.md; fix in acrm, then canon. Esc blocker fixed in acrm !5293 (19 Oct 2026): checkbox/radio no longer count as a typing field; re-checked on dev (Lidé 1440, focus on the row checkbox → Esc clears, bar unmounts). Canon 19 Oct 2026 (AD): stories Default · States · Composition, usage + a11y, dev check 1440/390 light/dark.

Used in 8 files · 4 areas · 8× — components/segment, pages/PipelinePage, pages/datamart, pages/komunikace

apps/web <BulkActionBar>.acrm-bulkbar .acrm-bulkbar-count .acrm-bulkbar-sepSourceStory
ExamplesCodeUsageAccessibilityChangelog

Floating pill at the bottom centre of a table or list that appears once rows are selected: the count, an optional „Vybrat všech N", the actions, „⋮" for the rest and × to clear the selection. One component for every list — BulkActionBar in apps/web/src/components/bulk/ — screens only pass their actions.

When to use

  • A table or list where the user selects rows with checkboxes and acts on all of them at once (change owner, export, delete, archive, delegate…).

When not to use

  • An action on one record — that belongs in the row (SplitButton / Button compact) or the detail's top bar.
  • A screen without row selection; do not show an empty bar.

Anatomy

  1. Count — number in accent + noun (noun, already pluralised by the host via t('…', { count }); default „vybráno", whole filter „vybráno (celý filtr)").
  2. Vybrat všech N — ghost compact, only when the whole loaded page is selected and the filter has more (selectAll).
  3. Actions — ghost buttons with icon and label. Destructive actions stay ghost inline; red appears only in „⋮" and in the confirm dialog.
  4. ⋮ Další akce — MenuButton for overflow actions.
  5. × — clears the selection (also Esc).

Position: fixed, bottom 24 px, centred on the parent (the table container), z 85 — above content, below toasts (90). Render it as a direct child of the table or list container.

Best practices

Do
  • Put the most used actions inline and the rare ones in overflow.
  • Mark the one action that must stay visible on a phone with primary (Komunikace: Delegovat…, in Koš: Obnovit). Without primary the first inline action stays.
  • Give destructive actions a confirm sentence with the count.
  • Use disabled + hint when the selection cannot be acted on, instead of hiding the action.
Don’t
  • Don't build a screen-specific phone variant — on ≤ 720 px the bar itself keeps one inline action, moves the rest to „⋮", keeps × visible and hides the page FAB.
  • Don't colour inline actions (no red, no primary fill): the bar is always on screen.
  • Don't add a second bar or a top-bar „Export selected" next to it.

Content

  • Labels are verbs: „Změnit vlastníka", „Exportovat", „Smazat"; dialogs end with „…".
  • The noun is pluralised by the host (komunikace:bulk.noun → „3 zprávy"); a custom count line is allowed (Datamart: „3 členů · 2 noví").
  • Table row (checkbox column), Segment table, Menu button, Confirm, FAB.

Source: docs/table/bulk-action-bar.usage.md · GitLab