EnterUI
DocsComponentsThemesExamplesDonation
Get Started
      • BulkActionBar
      • BulkEditPanel

Default usage

  1. EnterUI
  2. /Docs
  3. /Data and Analytics
  4. /Tables and Data
  5. /Bulk Workflows
  6. /BulkActionBar
Updated 3 October 2026

BulkActionBar

Compact action bar that appears when one or more items are selected.

BulkActionBar renders a compact bar showing the selected count, primary/secondary actions, and a clear control. It is hidden when count is 0. Pair with DataGrid selection or any list-style surface that supports multi-select.

#Default usage

3 selected

Bar surfaces only when count is greater than zero.

3selected
Code
<BulkActionBar
  actions={<><Button size="sm">Archive</Button><Button size="sm" variant="ghost">Move</Button></>}
  count={3}
/>

#Import

Code
import { BulkActionBar } from "@froggdesign/enter-ui-react";

#Accessibility

BulkActionBar uses role="region" with an aria-label pattern of {count} {countLabel}. The Clear control is a real <button>. Place the bar inside the same scroll container as the selectable surface so keyboard focus stays nearby after a selection action.

#API

  • count: required. The bar renders only when count > 0.
  • countLabel: customise the trailing label (default "selected").
  • actions: trailing actions slot (use Button size="sm").
  • onClear: when provided renders a ghost Clear button.
  • sticky: render the bar as a sticky footer.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

PreviousFilterBuilder
NextBulkEditPanel
On this page
  • Default usage
  • Import
  • Accessibility
  • API
  • Styling